/* ─────────────────────────────────────────────────────────────────────────────
   COLOR — Danbi

   An earthy, desaturated palette: warm stone/concrete neutrals (the modernist
   raw-material base) lifted by moss green (nature, local, free, "pass") and three
   warm earth accents that carry the product's status-driven semantics —
   ochre (in-progress / escalating), terracotta (the cloud rungs), oxide (fail).

   Status colour is FUNCTIONAL here, not decoration: the desktop run ledger lives
   or dies by pass / fail / escalating, so those three earth tones ARE the brand.

   Named themes (one `data-theme` value each; shape/elevation overrides live in
   spacing.css, font overrides in typography.css — each token file owns its domain):
     :root / [data-theme=moonjar] — "Moonjar" porcelain. The Danbi default: flat
                                     porcelain white, celadon primary.
     [data-theme=hanji]           — "Hanji" paper. The original brutalist light surface.
     [data-theme=dark] / =meok    — "Meok" ink. The terminal-adjacent dark surface.
     [data-theme=sambe]           — "Sambe" hemp cloth. Dim linen mid-tone, softened.
     [data-theme=contrast]        — High-contrast light (accessibility).
     [data-theme=terminal]        — Moss-tinted near-black; mono-everything.
     [data-theme=jegi]            — "Jegi". Bright, playful, de-militarised.
   `dark` is kept as an alias of `meok` so older refs keep working.
   Every component reads the SEMANTIC tokens (--bg, --ink, --primary, --status-*),
   never the raw ramps — so a single attribute reskins the whole system.
   ──────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Raw ramps ─────────────────────────────────────────────────────────── */

  /* Stone / concrete — warm neutral, faintly green-grey (never blue-grey) */
  --stone-25:  #FBFAF5;
  --stone-50:  #F5F3EC;
  --stone-100: #ECE8DD;
  --stone-200: #DCD7C8;
  --stone-300: #C5BFAD;
  --stone-400: #A8A18D;
  --stone-500: #837C6A;
  --stone-600: #5E584A;
  --stone-700: #423D32;
  --stone-800: #2A2620;
  --stone-900: #1A1713;
  --stone-950: #110E0B;

  /* Moss — primary. Nature, the local model, free work, "pass". */
  --moss-50:  #EEF1E2;
  --moss-100: #E2E7D2;
  --moss-200: #C4CFA6;
  --moss-300: #A3B47C;
  --moss-400: #879A5C;
  --moss-500: #6B7F45;
  --moss-600: #556738;
  --moss-700: #41502C;
  --moss-800: #2E3A20;
  --moss-900: #1E2715;

  /* Terracotta / clay — the cloud rungs (Sonnet / Opus). Warm, "this cost money". */
  --clay-100: #F1DEC9;
  --clay-200: #E6C9AC;
  --clay-300: #E0B48C;
  --clay-400: #CF9466;
  --clay-500: #BC7548;
  --clay-600: #9C5A34;
  --clay-700: #743F25;

  /* Ochre / amber — in-progress, escalating, warning. */
  --ochre-50:  #F7F0DA;
  --ochre-100: #F2E6C2;
  --ochre-300: #E5C77E;
  --ochre-400: #D3A84A;
  --ochre-500: #B8862F;
  --ochre-600: #946A22;
  --ochre-700: #6F4F19;

  /* Oxide / rust — fail, blocked, danger. */
  --oxide-50:  #F8EBE3;
  --oxide-100: #F3DDD2;
  --oxide-300: #E0A18C;
  --oxide-400: #CC6F4E;
  --oxide-500: #B0512F;
  --oxide-600: #8E3E22;
  --oxide-700: #6B2E19;

  /* ── Semantic — "Moonjar" porcelain (the Danbi default) ───────────────── */
  /* Named for the dalhangari (달항아리) moon jar: milky porcelain white with the
     celadon hue held to a whisper; every supporting colour cooled to match.
     Cloud/clay is muted to quiet sand — an escalated chip informs, never shouts. */
  --bg:            #FAFAF6;
  --bg-sunken:     #F1F3EE;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-inset: #F1F3EE;

  --ink:        #1E2320;
  --ink-muted:  #59635D;
  --ink-faint:  #8A948D;
  --ink-invert: #FAFAF6;

  --line:        #E4E8E1;
  --line-soft:   #EFF2EC;
  --line-strong: #C4CCC3;

  --primary:        #54858C;   /* celadon — blue-green glaze */
  --primary-hover:  #446F77;
  --primary-active: #385D64;
  --primary-ink:    #FFFFFF;
  --primary-soft:   #E0EBEC;

  --cloud:       #C9B393;   /* quiet sand — informs, doesn't shout */
  --cloud-soft:  #F1EAE0;
  --cloud-ink:   #77603F;

  /* Tint — the logomark's light-celadon band as a control surface (promoted
     from the bydanbi.com hero, where it debuted as a one-off). Logo literals,
     deliberately theme-invariant (the mark doesn't reskin), so the ink is
     pinned dark rather than var(--ink) — which flips light on dark themes and
     would fail contrast on this fixed light ground. */
  --tint:        #A0C3C6;   /* the logo's upper band */
  --tint-hover:  #8FB6BA;
  --tint-active: #7FA6AB;
  --tint-ink:    #1E2320;

  /* Status — each as fg (text/glyph) · bg (fill) · line (border) */
  --pass-fg:   #396B5C;  --pass-bg:   #E3EEE8;  --pass-line:  #A8C8BB;
  --fail-fg:   #A34A31;  --fail-bg:   #F7E4DC;  --fail-line:  #DBA087;
  --run-fg:    #8A6D1C;  --run-bg:    #F5EDD2;  --run-line:   #DCC474;
  --idle-fg:   #8A948D;  --idle-bg:   #F1F3EE;  --idle-line:  #E4E8E1;

  --focus-ring: #446F77;
  --selection:  #D2E3E5;

  color-scheme: light;
}

[data-theme='hanji'] {
  /* ── Semantic — "Hanji" paper (the original brutalist light surface) ──── */
  --bg:            var(--stone-50);
  --bg-sunken:     var(--stone-100);
  --surface:       var(--stone-25);
  --surface-2:     #FFFFFF;
  --surface-inset: var(--stone-100);

  --ink:        var(--stone-900);
  --ink-muted:  var(--stone-600);
  --ink-faint:  var(--stone-500);
  --ink-invert: var(--stone-50);

  --line:        var(--stone-300);   /* hairline */
  --line-soft:   var(--stone-200);
  --line-strong: var(--stone-700);   /* brutalist structural border */

  --primary:        var(--moss-500);
  --primary-hover:  var(--moss-600);
  --primary-active: var(--moss-700);
  --primary-ink:    var(--stone-50);
  --primary-soft:   var(--moss-100);

  --cloud:       var(--clay-500);    /* escalation → cloud */
  --cloud-soft:  var(--clay-100);
  --cloud-ink:   var(--clay-700);

  /* Status — each as fg (text/glyph) · bg (fill) · line (border) */
  --pass-fg:   var(--moss-700);  --pass-bg:   var(--moss-100);  --pass-line:  var(--moss-300);
  --fail-fg:   var(--oxide-600); --fail-bg:   var(--oxide-100); --fail-line:  var(--oxide-400);
  --run-fg:    var(--ochre-700); --run-bg:    var(--ochre-100); --run-line:   var(--ochre-400);
  --idle-fg:   var(--stone-500); --idle-bg:   var(--stone-100); --idle-line:  var(--stone-300);

  --focus-ring: var(--moss-500);
  --selection:  var(--moss-200);

  color-scheme: light;
}

[data-theme='dark'],
[data-theme='meok'] {
  /* ── Semantic — "Meok" ink (dark, terminal-adjacent) ──────────────────── */
  --bg:            #15120E;
  --bg-sunken:     #100E0A;
  --surface:       #1C1A15;
  --surface-2:     #221F19;
  --surface-inset: #100E0A;

  --ink:        #E8E3D6;
  --ink-muted:  var(--stone-400);
  --ink-faint:  var(--stone-500);
  --ink-invert: var(--stone-900);

  --line:        #2E2A22;
  --line-soft:   #221F19;
  --line-strong: #4A4439;

  --primary:        var(--moss-300);
  --primary-hover:  var(--moss-200);
  --primary-active: var(--moss-100);
  --primary-ink:    #15120E;
  --primary-soft:   #232C18;

  --cloud:       var(--clay-400);
  --cloud-soft:  #2A2114;
  --cloud-ink:   var(--clay-300);

  --pass-fg:   var(--moss-300);  --pass-bg:   #1E2715;  --pass-line:  var(--moss-700);
  --fail-fg:   var(--oxide-300); --fail-bg:   #2A1813;  --fail-line:  var(--oxide-600);
  --run-fg:    var(--ochre-300); --run-bg:    #2A2210;  --run-line:   var(--ochre-600);
  --idle-fg:   var(--stone-500); --idle-bg:   #1C1A15;  --idle-line:  #2E2A22;

  --focus-ring: var(--moss-300);
  --selection:  #2E3A20;

  color-scheme: dark;
}

[data-theme='sambe'] {
  /* ── Semantic — "Sambe" hemp cloth (dim mid-tone, softened) ─────────── */
  /* The neutral middle ground between Hanji's bright paper and Jegi's candy:
     unbleached-linen surfaces a step dimmer than Washi, the full earth status
     language intact, and — via spacing.css — gently rounded corners and soft
     warm shadows in place of the hard brutalist blocks. */
  --bg:            #E6E0CE;
  --bg-sunken:     #DBD3BD;
  --surface:       #EFEADA;
  --surface-2:     #F6F2E4;
  --surface-inset: #DBD3BD;

  --ink:        var(--stone-900);
  --ink-muted:  var(--stone-600);
  --ink-faint:  var(--stone-500);
  --ink-invert: var(--stone-50);

  --line:        #B4AD97;
  --line-soft:   #CDC6B0;
  --line-strong: #55503F;   /* softened from stone-700 — structure without severity */

  --primary:        var(--moss-600);
  --primary-hover:  var(--moss-700);
  --primary-active: var(--moss-800);
  --primary-ink:    #F6F2E4;
  --primary-soft:   var(--moss-100);

  --cloud:       var(--clay-500);
  --cloud-soft:  var(--clay-100);
  --cloud-ink:   var(--clay-700);

  --pass-fg:   var(--moss-700);  --pass-bg:   var(--moss-100);  --pass-line:  var(--moss-300);
  --fail-fg:   var(--oxide-600); --fail-bg:   var(--oxide-100); --fail-line:  var(--oxide-400);
  --run-fg:    var(--ochre-700); --run-bg:    var(--ochre-100); --run-line:   var(--ochre-400);
  --idle-fg:   var(--stone-500); --idle-bg:   #DBD3BD;          --idle-line:  #B4AD97;

  --focus-ring: var(--moss-600);
  --selection:  var(--moss-200);

  color-scheme: light;
}

[data-theme='contrast'] {
  /* ── Semantic — high-contrast light (accessibility) ───────────────────── */
  /* Pure ink on paper, black structural lines, darkest-ramp status tones so every
     fg/bg pair clears WCAG AA. Muted/faint keep a REAL step down from ink
     (#404040 / #595959 still clear AA) so text hierarchy survives. Pairs with the
     sans-forward font override in typography.css. */
  --bg:            #FFFFFF;
  --bg-sunken:     #F2F1EA;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-inset: #F2F1EA;

  --ink:        #000000;
  --ink-muted:  #404040;
  --ink-faint:  #595959;
  --ink-invert: #FFFFFF;

  --line:        #000000;
  --line-soft:   #4D4D4D;
  --line-strong: #000000;

  --primary:        var(--moss-700);
  --primary-hover:  var(--moss-800);
  --primary-active: var(--moss-900);
  --primary-ink:    #FFFFFF;
  --primary-soft:   var(--moss-100);

  --cloud:       var(--clay-700);
  --cloud-soft:  var(--clay-100);
  --cloud-ink:   var(--clay-700);

  --pass-fg:   var(--moss-700);  --pass-bg:   #FFFFFF;  --pass-line:  var(--moss-700);
  --fail-fg:   var(--oxide-700); --fail-bg:   #FFFFFF;  --fail-line:  var(--oxide-700);
  --run-fg:    var(--ochre-700); --run-bg:    #FFFFFF;  --run-line:   var(--ochre-700);
  --idle-fg:   #404040;          --idle-bg:   #FFFFFF;  --idle-line:  #000000;

  --focus-ring: #000000;
  --selection:  var(--moss-200);

  color-scheme: light;
}

[data-theme='terminal'] {
  /* ── Semantic — moss-tinted near-black (terminal) ─────────────────────── */
  /* A greener, darker cousin of Sumi with a bright-moss primary; pairs with the
     mono-forward font override in typography.css. Faint ink is moss-400 (not
     moss-500 — borderline contrast at small sizes) and IDLE stays neutral stone:
     moss is the pass/primary hue, and a moss idle would dilute that signal. */
  --bg:            #0D110B;
  --bg-sunken:     #080A07;
  --surface:       #121710;
  --surface-2:     #171C13;
  --surface-inset: #080A07;

  --ink:        #D7E0C8;
  --ink-muted:  var(--moss-300);
  --ink-faint:  var(--moss-400);
  --ink-invert: #0D110B;

  --line:        #232A1C;
  --line-soft:   #171C13;
  --line-strong: #3A442D;

  --primary:        var(--moss-200);
  --primary-hover:  var(--moss-100);
  --primary-active: var(--moss-50);
  --primary-ink:    #0D110B;
  --primary-soft:   #1E2715;

  --cloud:       var(--clay-400);
  --cloud-soft:  #2A2114;
  --cloud-ink:   var(--clay-300);

  --pass-fg:   var(--moss-200);  --pass-bg:   #1A2113;  --pass-line:  var(--moss-600);
  --fail-fg:   var(--oxide-300); --fail-bg:   #241511;  --fail-line:  var(--oxide-600);
  --run-fg:    var(--ochre-300); --run-bg:    #241D0E;  --run-line:   var(--ochre-600);
  --idle-fg:   var(--stone-500); --idle-bg:   #121710;  --idle-line:  #232A1C;

  --focus-ring: var(--moss-200);
  --selection:  #2E3A20;

  color-scheme: dark;
}

[data-theme='jegi'] {
  /* ── Semantic — "Jegi" (bright, playful, de-militarised) ──── */
  /* The deliberate opposite of the brutalist brand: warm optimistic surfaces,
     friendly lilac structure (never black) and a joyful violet primary. Status
     colors stay in the BRAND's earth hues — moss / ochre / oxide / clay, just
     brighter and higher-chroma — so pass/fail/run read the same across every
     theme. Rounded corners + soft violet shadows live in spacing.css; the
     friendlier type (sans display, no uppercase shouting) in typography.css. */
  --bg:            #FEF7F1;
  --bg-sunken:     #F7ECFA;
  --surface:       #FFFFFF;
  --surface-2:     #FFFFFF;
  --surface-inset: #F6EEFB;

  --ink:        #3A2B50;   /* warm deep plum — softer than black */
  --ink-muted:  #6E5C86;
  --ink-faint:  #A08FB8;
  --ink-invert: #FFFFFF;

  --line:        #ECD9F2;
  --line-soft:   #F4E9F8;
  --line-strong: #D7B8EA;  /* friendly lilac replaces the black structural line */

  --primary:        #8B5CF6;  /* joyful violet */
  --primary-hover:  #7C3AED;
  --primary-active: #6D28D9;
  --primary-ink:    #FFFFFF;
  --primary-soft:   #EDE4FF;

  --cloud:       #F08A3B;  /* clay, brightened to warm tangerine */
  --cloud-soft:  #FFE9D5;
  --cloud-ink:   #B45715;

  /* Earth hues, sun-brightened — same hue family as every other theme. */
  --pass-fg:   #4A7622;  --pass-bg:   #E9F4CF;  --pass-line:  #A9CF6B;  /* bright moss    */
  --fail-fg:   #C2451F;  --fail-bg:   #FDE4D7;  --fail-line:  #F3A57E;  /* bright oxide   */
  --run-fg:    #A36B08;  --run-bg:    #FCF0C4;  --run-line:   #F2CF67;  /* bright ochre   */
  --idle-fg:   #8B7A99;  --idle-bg:   #F5EEF9;  --idle-line:  #E7D9EE;

  --focus-ring: #8B5CF6;
  --selection:  #E9D5FF;

  color-scheme: light;
}

::selection { background: var(--selection); }