/* refine — Content Analysis · LOCKED design tokens (Frost Light + Blue + Slate) */

:root {
  --bg:        #FAFBFC;
  --bg-2:      #F4F6F8;
  --paper:     #FFFFFF;
  --paper-2:   #FCFDFE;
  --paper-3:   #F7F9FB;
  --ink:       #14161A;
  --ink-2:     #4B505A;
  --muted:     #888E98;
  --faint:     #979797;
  --line:      #F2F4F6;
  --line-2:    #E5E8EC;

  --accent:        #3B47F5;
  --accent-ink:    #2F38C4;
  --accent-soft:   #F3F4FE;
  --accent-bd:     #C5CAFC;
  --accent-fg:     #2B3299;
  --focus:         rgba(59, 71, 245, 0.22);

  --good:          #1E7A52;
  --good-soft:     #EBFCF4;
  --good-bd:       #B8E8D4;
  --good-fg:       #1A543D;
  --warn:          #C08327;
  --warn-soft:     #FBF5EC;
  --warn-bd:       #E8D4B0;
  --warn-fg:       #7B5722;

  --danger:        #C2453B;
  --danger-soft:   #FBEDEB;
  --danger-bd:     #F0CFCB;
  --danger-fg:     #8B2A22;

  --chip-accent-fg: #2B3299;
  --chip-good-fg:   #1A543D;
  --chip-warn-fg:   #7B5722;
  --banner-warn-text: #825C22;

  --intent-add-bg:     #E6F0EC;
  --intent-add-bd:     rgba(30, 122, 82, 0.32);
  --intent-trim-bg:    #F8F1E7;
  --intent-trim-bd:    rgba(192, 131, 39, 0.32);
  --intent-rewrite-bg: #E9EBFE;
  --intent-rewrite-bd: rgba(59, 71, 245, 0.32);
  --intent-remove-bg:  #F8EBE9;
  --intent-remove-bd:  rgba(194, 69, 59, 0.32);

  --pri-high-bg:    #F9ECEB;
  --pri-high-bd:    rgba(194, 69, 59, 0.34);
  --pri-medium-bg:  #F9F3E9;
  --pri-medium-bd:  rgba(192, 131, 39, 0.34);
  --pri-low-bg:     #F3F4F5;
  --pri-low-bd:     rgba(136, 142, 152, 0.34);

  --pin-accent-fg: #2D35A6;
  --pin-good-fg:   #1A563E;

  --card-draft-tint:    #FCF9F4;
  --card-towrite-tint:  #F4F8F6;
  --card-draft-icon-bg: #F5EBDC;
  --draft-pill-bg:      #F7F0E5;
  --card-towrite-banner-fg: #1B5C41;

  --side:          #23272E;
  --side-2:        #2F343D;
  --side-line:     rgba(230, 235, 242, 0.12);
  --side-ink:      #EDF0F4;
  --side-muted:    #9AA1AC;
  --side-faint:    #6E7682;
  --side-accent:   var(--accent);

  --shadow-panel: 0 1px 0 var(--line), 0 30px 60px -34px rgba(30, 26, 16, 0.26);
  --shadow-lift:  0 1px 0 var(--line), 0 22px 44px -26px rgba(30, 26, 16, 0.22);

  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans:    'Space Grotesk', system-ui, sans-serif;
  --mono:    'Space Mono', ui-monospace, monospace;

  --editor-content-width: 800px;
  --editor-padding-top: 44px;
  --editor-padding-top-inner: 30px;
  --editor-padding-bottom: 80px;
  --editor-padding-inline: 0;
  --editor-selection-bg: var(--accent);
  --editor-selection-fg: var(--paper);

  /* Unified editor workspace + paper surface */
  --editor-pattern-image:
    linear-gradient(to right, color-mix(in srgb, var(--line-2) 24%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--line-2) 24%, transparent) 1px, transparent 1px);
  --editor-pattern-size: 48px 48px;
  --pattern-image: var(--editor-pattern-image);
  --pattern-size: var(--editor-pattern-size);
  --editor-paper-width: 960px;
  --editor-paper-margin-top: 28px;
  --editor-paper-margin-bottom: 80px;
  --editor-paper-padding-top: 60px;
  --editor-paper-padding-inline: 72px;
  --editor-paper-padding-bottom: 84px;
  --writer-paper-width: var(--editor-paper-width);
  --writer-workspace-pad-left: 44px;
  --writer-workspace-pad-right: 32px;
}

.app-canvas::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: 40px 40px;
}

.app-canvas::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}