/* ══════════════════════════════════════════
   DESIGN TOKENS
   Light theme variables, dark overrides,
   and OS-preference fallback.
══════════════════════════════════════════ */

:root {
  --bg:              #F4F5F7;
  --surface:         #FFFFFF;
  --surface-raised:  #FAFAFA;
  --border:          #E2E4E9;
  --border-strong:   #C8CDD8;
  --text:            #111827;
  --text-secondary:  #374151;
  --text-muted:      #6B7280;
  --text-faint:      #9CA3AF;

  --brand:           #F5C518;
  --brand-mid:       #E2A800;
  --brand-dark:      #B88500;
  --brand-glow:      rgba(245,197,24,.18);

  --error:           #DC2626;
  --error-bg:        #FEF2F2;
  --error-border:    #FECACA;
  --error-soft:      #FCA5A5;

  --warning:         #D97706;
  --warning-bg:      #FFFBEB;
  --warning-border:  #FDE68A;
  --warning-soft:    #FCD34D;

  --info:            #2563EB;
  --info-bg:         #EFF6FF;
  --info-border:     #BFDBFE;
  --info-soft:       #93C5FD;

  --success:         #059669;
  --success-bg:      #ECFDF5;
  --success-border:  #A7F3D0;
  --success-soft:    #6EE7B7;

  --editor-bg:       #FEFEFE;
  --gutter-bg:       #F8F9FB;
  --gutter-border:   #EAECF0;

  /* ── Syntax highlight colours ── */
  --hl-delim:        #94A3B8;
  --hl-key:          #0369A1;
  --hl-punct:        #94A3B8;
  --hl-val:          #92400E;
  --hl-val-cont:     #92400E;
  --hl-comment:      #94A3B8;
  --hl-fence:        #6B7280;
  --hl-code-line:    #6D28D9;
  --hl-h1:           #B45309;
  --hl-h2:           #0369A1;
  --hl-h3:           #374151;
  --hl-h-sym:        #CBD5E1;
  --hl-list:         #0369A1;
  --hl-bq:           #94A3B8;
  --hl-bold:         #111827;
  --hl-italic:       #374151;
  --hl-icode:        #6D28D9;
  --hl-icode-bg:     rgba(109,40,217,.06);
  --hl-link:         #1D4ED8;
  --hl-url:          #94A3B8;

  --r-sm:  4px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-2xl: 20px;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);

  --font-ui:   'Inter', system-ui, -apple-system, sans-serif;
  --font-code: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;

  --header-h:  60px;
  --toolbar-h: 48px;
}

/* ── Dark mode tokens ── */
[data-theme="dark"] {
  --bg:              #0D1117;
  --surface:         #161B22;
  --surface-raised:  #1C2330;
  --border:          #272E3C;
  --border-strong:   #37404F;
  --text:            #E6EDF3;
  --text-secondary:  #B0BAC8;
  --text-muted:      #7A8496;
  --text-faint:      #4A5264;

  --brand:           #F5C518;
  --brand-mid:       #FFD740;
  --brand-dark:      #FFE57A;
  --brand-glow:      rgba(245,197,24,.15);

  --error:           #F87171;
  --error-bg:        #2A1515;
  --error-border:    #4A2020;
  --error-soft:      #EF4444;

  --warning:         #FBBF24;
  --warning-bg:      #271E0D;
  --warning-border:  #4A3510;
  --warning-soft:    #F59E0B;

  --info:            #60A5FA;
  --info-bg:         #111D35;
  --info-border:     #1E3358;
  --info-soft:       #3B82F6;

  --success:         #34D399;
  --success-bg:      #0D2620;
  --success-border:  #164D3A;
  --success-soft:    #10B981;

  --editor-bg:       #0D1117;
  --gutter-bg:       #0A0E14;
  --gutter-border:   #1C2330;

  /* ── Syntax highlight colours (dark) ── */
  --hl-delim:        #374151;
  --hl-key:          #38BDF8;
  --hl-punct:        #374151;
  --hl-val:          #FBBF24;
  --hl-val-cont:     #F59E0B;
  --hl-comment:      #374151;
  --hl-fence:        #4B5563;
  --hl-code-line:    #C084FC;
  --hl-h1:           #F5C518;
  --hl-h2:           #60A5FA;
  --hl-h3:           #94A3B8;
  --hl-h-sym:        #1F2937;
  --hl-list:         #38BDF8;
  --hl-bq:           #4B5563;
  --hl-bold:         #F9FAFB;
  --hl-italic:       #E5E7EB;
  --hl-icode:        #C084FC;
  --hl-icode-bg:     rgba(192,132,252,.1);
  --hl-link:         #60A5FA;
  --hl-url:          #374151;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 1px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4),  0 2px 4px rgba(0,0,0,.25);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
}

/* ── System preference fallback ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:              #0D1117;
    --surface:         #161B22;
    --surface-raised:  #1C2330;
    --border:          #272E3C;
    --border-strong:   #37404F;
    --text:            #E6EDF3;
    --text-secondary:  #B0BAC8;
    --text-muted:      #7A8496;
    --text-faint:      #4A5264;

    --brand:           #58C4E4;
    --brand-mid:       #38BDF8;
    --brand-dark:      #7DD3FC;
    --brand-glow:      rgba(88,196,228,.15);

    --error:           #F87171;
    --error-bg:        #2A1515;
    --error-border:    #4A2020;
    --error-soft:      #EF4444;

    --warning:         #FBBF24;
    --warning-bg:      #271E0D;
    --warning-border:  #4A3510;
    --warning-soft:    #F59E0B;

    --info:            #60A5FA;
    --info-bg:         #111D35;
    --info-border:     #1E3358;
    --info-soft:       #3B82F6;

    --success:         #34D399;
    --success-bg:      #0D2620;
    --success-border:  #164D3A;
    --success-soft:    #10B981;

    --editor-bg:       #0D1117;
    --gutter-bg:       #0A0E14;
    --gutter-border:   #1C2330;

    --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
    --shadow-sm: 0 1px 4px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,.4),  0 2px 4px rgba(0,0,0,.25);
    --shadow-lg: 0 12px 32px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.3);
  }
}