/* ============================================================
   SHU HA RI — design tokens
   Extracted from the .dc.html design source (dark + White variants).
   :root            = DARK (default)
   :root[data-theme="light"] = LIGHT overrides
   ============================================================ */

:root {
  /* --- type --- */
  --f-ui: 'Space Grotesk', system-ui, sans-serif;
  --f-display: 'Space Grotesk', system-ui, sans-serif;
  --f-data: 'JetBrains Mono', ui-monospace, monospace;

  --fs-micro: 9px;
  --fs-label: 11px;
  --fs-body: 14px;
  --fs-data: 13px;
  --fs-kpi: 30px;
  --fs-h: 20px;

  --ls-tight: 0.08em;
  --ls-wide: 0.16em;
  --ls-wider: 0.22em;

  /* --- spacing --- */
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 14px;
  --sp-4: 20px;
  --sp-5: 28px;
  --radius: 2px;

  /* --- DARK palette --- */
  --bg: #0A0A0B;
  --surface: rgba(224, 224, 220, 0.02);
  --surface-2: rgba(255, 255, 255, 0.018);
  --panel-border: rgba(224, 224, 220, 0.16);
  --panel-border-soft: rgba(224, 224, 220, 0.12);
  --hairline: rgba(224, 224, 220, 0.10);

  --text: #E0E0DC;
  --text-strong: #FFFFFF;
  --text-mid: #8F8F8B;
  --text-muted: #6E6E69;

  --accent: #1F9D6B;          /* signature green */
  --accent-soft: rgba(31, 157, 107, 0.06);
  --accent-line: rgba(31, 157, 107, 0.35);

  --pos: #1F9D6B;
  --neg: #F87171;
  --neg-strong: #C73E3A;
  --neg-soft: rgba(248, 113, 113, 0.07);
  --neg-line: rgba(248, 113, 113, 0.40);
  --warn: #FBBF24;
  --warn-soft: rgba(251, 191, 36, 0.08);
  --warn-line: rgba(251, 191, 36, 0.40);

  --scroll-thumb: rgba(224, 224, 220, 0.18);
  --scroll-thumb-hover: rgba(224, 224, 220, 0.35);

  /* chart-facing (JS reads these) */
  --grid-line: rgba(224, 224, 220, 0.08);
}

:root[data-theme="light"] {
  --bg: #FCFCFB;
  --surface: rgba(20, 20, 18, 0.02);
  --surface-2: rgba(20, 20, 18, 0.024);
  --panel-border: rgba(20, 20, 18, 0.16);
  --panel-border-soft: rgba(20, 20, 18, 0.12);
  --hairline: rgba(20, 20, 18, 0.10);

  --text: #1A1A18;
  --text-strong: #0A0A0B;
  --text-mid: #6E6E69;
  --text-muted: #6E6E69;

  --accent: #1F9D6B;
  --accent-soft: rgba(31, 157, 107, 0.06);
  --accent-line: rgba(31, 157, 107, 0.35);

  --pos: #1F9D6B;
  --neg: #C73E3A;
  --neg-strong: #C73E3A;
  --neg-soft: rgba(199, 62, 58, 0.07);
  --neg-line: rgba(199, 62, 58, 0.35);
  --warn: #B8860B;
  --warn-soft: rgba(184, 134, 11, 0.08);
  --warn-line: rgba(184, 134, 11, 0.40);

  --scroll-thumb: rgba(20, 20, 18, 0.18);
  --scroll-thumb-hover: rgba(20, 20, 18, 0.35);

  --grid-line: rgba(20, 20, 18, 0.08);
}