/* lid.eg.je — design tokens
   Three visual directions × light + dark.
   Direction = overall aesthetic & color story. Mode = light / dark.
*/

:root {
  /* spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* radii */
  --r-1: 4px; --r-2: 6px; --r-3: 10px; --r-4: 14px;

  /* type stacks — Inter first for guaranteed Vietnamese + Cyrillic coverage,
     then a generous system fallback so even before webfont arrives the page
     renders correctly on Win/macOS/iOS/Android with native VI/CYR support. */
  --font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
    "Helvetica Neue", "Noto Sans", "Noto Sans Vietnamese", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code",
    "Menlo", "Consolas", "Liberation Mono", monospace;
  --font-display: "Instrument Serif", "Times New Roman", "Noto Serif",
    "Noto Serif Vietnamese", Georgia, serif;

  /* sizes */
  --t-kicker: 10.5px;
  --t-micro:  11px;
  --t-meta:   12px;
  --t-body:   13.5px;
  --t-h3:     15px;
  --t-h2:     19px;
  --t-h1:     28px;
  --t-num:    32px;
  --t-num-xl: 44px;
}

/* ─────────────────────────────────────────────────────────────
   DIRECTION A — "Ledger"
   Stripe-leaning. Near-white, near-black, single indigo signal.
   Confidence through restraint. Dense but spacious.
   ───────────────────────────────────────────────────────────── */
[data-direction="ledger"][data-mode="light"] {
  --bg:        #f6f7f8;
  --surface:   #ffffff;
  --surface-2: #fbfbfc;
  --surface-3: #f0f1f3;
  --border:    rgba(15, 17, 24, 0.085);
  --border-2:  rgba(15, 17, 24, 0.13);
  --shadow-1:  0 1px 0 rgba(15, 17, 24, 0.04), 0 1px 2px rgba(15, 17, 24, 0.03);
  --shadow-2:  0 1px 0 rgba(15, 17, 24, 0.04), 0 4px 16px -4px rgba(15, 17, 24, 0.08);

  --ink:        #0f1118;
  --ink-2:      #2a2f3d;
  --ink-muted:  #5a6072;
  --ink-faint:  #8a90a0;

  --brand:     #5b50e0;   /* Stripe-ish indigo */
  --brand-2:   #4338ca;
  --brand-bg:  #eeecff;
  --brand-fg:  #ffffff;

  --ok:     #138a3f;
  --ok-bg:  #d8f3df;
  --warn:   #9a6700;
  --warn-bg:#fdf3c8;
  --bad:    #b42318;
  --bad-bg: #fde5e3;
  --info:   #1e63d4;
  --info-bg:#dbe9ff;
  --neut-bg:#e9ebef;
  --neut-fg:#3d4252;

  --shine: rgba(91, 80, 224, 0.06);
}
[data-direction="ledger"][data-mode="dark"] {
  --bg:        #0b0c10;
  --surface:   #14161c;
  --surface-2: #181a21;
  --surface-3: #20232c;
  --border:    rgba(255, 255, 255, 0.08);
  --border-2:  rgba(255, 255, 255, 0.14);
  --shadow-1:  0 1px 0 rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-2:  0 1px 0 rgba(0,0,0,0.5), 0 6px 24px -6px rgba(0,0,0,0.6);

  --ink:        #f1f2f5;
  --ink-2:      #d4d6dd;
  --ink-muted:  #8c92a1;
  --ink-faint:  #5a6072;

  --brand:     #8b80ff;
  --brand-2:   #a195ff;
  --brand-bg:  #1f1d3a;
  --brand-fg:  #0b0c10;

  --ok:     #6ee29a;
  --ok-bg:  #122a1c;
  --warn:   #f5c451;
  --warn-bg:#2a2110;
  --bad:    #ff7a6e;
  --bad-bg: #2a1414;
  --info:   #6aa4ff;
  --info-bg:#0f1a2e;
  --neut-bg:#1d1f27;
  --neut-fg:#a8aebd;

  --shine: rgba(139, 128, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────
   DIRECTION B — "Signal"
   Linear-leaning. More technical, monospace-driven for data.
   Black + acid green signal. Tighter, more engineered.
   ───────────────────────────────────────────────────────────── */
[data-direction="signal"][data-mode="light"] {
  --bg:        #ededee;
  --surface:   #ffffff;
  --surface-2: #f7f7f8;
  --surface-3: #ebebed;
  --border:    rgba(8, 8, 12, 0.10);
  --border-2:  rgba(8, 8, 12, 0.18);
  --shadow-1:  none;
  --shadow-2:  0 2px 0 rgba(8, 8, 12, 0.04);

  --ink:        #08080c;
  --ink-2:      #1f1f25;
  --ink-muted:  #5b5b66;
  --ink-faint:  #8a8a96;

  --brand:     #0d7a36;   /* Bloomberg green, calmed */
  --brand-2:   #075925;
  --brand-bg:  #d5efd9;
  --brand-fg:  #ffffff;

  --ok:     #0d7a36;
  --ok-bg:  #d5efd9;
  --warn:   #8a6100;
  --warn-bg:#fbedc1;
  --bad:    #c52821;
  --bad-bg: #ffd7d4;
  --info:   #0855c7;
  --info-bg:#d3e1fc;
  --neut-bg:#e2e2e6;
  --neut-fg:#2f2f37;

  --shine: rgba(13, 122, 54, 0.08);
}
[data-direction="signal"][data-mode="dark"] {
  --bg:        #0a0a0c;
  --surface:   #121214;
  --surface-2: #16161a;
  --surface-3: #1f1f24;
  --border:    rgba(255, 255, 255, 0.075);
  --border-2:  rgba(255, 255, 255, 0.16);
  --shadow-1:  none;
  --shadow-2:  0 2px 0 rgba(0, 0, 0, 0.6);

  --ink:        #ededee;
  --ink-2:      #c8c8cc;
  --ink-muted:  #7c7c87;
  --ink-faint:  #545460;

  --brand:     #4ade80;   /* signal green */
  --brand-2:   #6ee599;
  --brand-bg:  #0f2418;
  --brand-fg:  #08080c;

  --ok:     #4ade80;
  --ok-bg:  #0f2418;
  --warn:   #fbbf24;
  --warn-bg:#2a1f08;
  --bad:    #f87171;
  --bad-bg: #2a1212;
  --info:   #60a5fa;
  --info-bg:#0e1a2c;
  --neut-bg:#1d1d22;
  --neut-fg:#a8a8b4;

  --shine: rgba(74, 222, 128, 0.10);
}

/* ─────────────────────────────────────────────────────────────
   DIRECTION C — "Halcyon"
   Calm fintech. Warm paper, deep teal, serif headlines.
   More human. Confident through warmth, not minimalism.
   ───────────────────────────────────────────────────────────── */
[data-direction="halcyon"][data-mode="light"] {
  --bg:        #f5f1ea;
  --surface:   #fdfaf3;
  --surface-2: #f8f3e8;
  --surface-3: #eee6d5;
  --border:    rgba(28, 25, 20, 0.10);
  --border-2:  rgba(28, 25, 20, 0.18);
  --shadow-1:  0 1px 0 rgba(28, 25, 20, 0.04);
  --shadow-2:  0 1px 0 rgba(28, 25, 20, 0.05), 0 8px 24px -8px rgba(28, 25, 20, 0.12);

  --ink:        #1c1914;
  --ink-2:      #3a3528;
  --ink-muted:  #6b6452;
  --ink-faint:  #9a9382;

  --brand:     #0d6a5e;   /* deep teal */
  --brand-2:   #074a41;
  --brand-bg:  #d3e8e3;
  --brand-fg:  #fdfaf3;

  --ok:     #2f7a2d;
  --ok-bg:  #dfecd6;
  --warn:   #95580a;
  --warn-bg:#f4e0bd;
  --bad:    #a82a1f;
  --bad-bg: #f5d4ce;
  --info:   #1f5fa8;
  --info-bg:#d6e2f1;
  --neut-bg:#e7dfcd;
  --neut-fg:#3a3528;

  --shine: rgba(13, 106, 94, 0.06);
}
[data-direction="halcyon"][data-mode="dark"] {
  --bg:        #14110c;
  --surface:   #1c1812;
  --surface-2: #221d16;
  --surface-3: #2b251c;
  --border:    rgba(245, 235, 215, 0.08);
  --border-2:  rgba(245, 235, 215, 0.16);
  --shadow-1:  none;
  --shadow-2:  0 6px 24px -8px rgba(0, 0, 0, 0.7);

  --ink:        #f3ead6;
  --ink-2:      #d4c9aa;
  --ink-muted:  #998d6e;
  --ink-faint:  #6a604a;

  --brand:     #5fbfaf;
  --brand-2:   #80d3c4;
  --brand-bg:  #143028;
  --brand-fg:  #14110c;

  --ok:     #7dc66a;
  --ok-bg:  #1a2a14;
  --warn:   #e8b65a;
  --warn-bg:#2c220e;
  --bad:    #e87a6e;
  --bad-bg: #2c1614;
  --info:   #7aafe6;
  --info-bg:#10202e;
  --neut-bg:#2a241a;
  --neut-fg:#bdb39a;

  --shine: rgba(95, 191, 175, 0.08);
}

/* per-direction font choices */
[data-direction="ledger"]   { --font-h1: var(--font-ui); --num-feat: "tnum" on, "lnum" on; }
[data-direction="signal"]   { --font-h1: var(--font-mono); --num-feat: "tnum" on, "lnum" on; --tracking-h1: -0.01em; }
[data-direction="halcyon"]  { --font-h1: var(--font-display); --num-feat: "tnum" on, "lnum" on; }