/* cs-bihar-ui · design tokens · light + dark
   Authored from the design-system spec for the CS Bihar Voice Bot.
   All other stylesheets MUST reference these tokens — no raw hex or px scales. */

:root {
  /* Type stack */
  --font-display: 'Tiro Devanagari Hindi', 'Source Serif 4', Georgia, serif;
  --font-body:    'Inter', 'Noto Sans Devanagari', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Type scale */
  --text-display-1: 72px;  --leading-display-1: 80px;   --tracking-display-1: -2.5px;
  --text-h1:        48px;  --leading-h1:        56px;   --tracking-h1:        -1.5px;
  --text-h2:        32px;  --leading-h2:        40px;   --tracking-h2:        -1px;
  --text-h3:        22px;  --leading-h3:        30px;   --tracking-h3:        -0.4px;
  --text-lead:      18px;  --leading-lead:      28px;
  --text-base:      16px;  --leading-base:      24px;
  --text-sm:        14px;  --leading-sm:        20px;
  --text-mono:      13px;  --leading-mono:      18px;
  --text-xs:        12px;  --leading-xs:        16px;   --tracking-xs:        0.4px;

  /* Spacing — 4-pt grid */
  --space-0: 0;       --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;    --space-5: 24px;  --space-6: 32px;  --space-7: 48px;
  --space-8: 64px;    --space-9: 96px;  --space-10: 128px;

  /* Radius */
  --radius-0: 0;      --radius-1: 4px;  --radius-2: 8px;  --radius-pill: 999px;

  /* Motion */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --dur-instant: 80ms;  --dur-fast: 160ms;  --dur-med: 240ms;
  --dur-slow: 400ms;    --dur-page: 500ms;

  /* Layout */
  --max-content: 1200px;
  --max-reading: 720px;
  --gutter: 24px;

  /* ───────── Light theme (default) ───────── */
  color-scheme: light;

  --bg-base:       #F8F6F0;
  --bg-elev-1:     #FFFFFF;
  --bg-elev-2:     #F1EEE5;
  --bg-overlay:    rgba(11, 17, 24, 0.04);

  --ink-primary:   #0B1118;
  --ink-secondary: #4A5468;
  --ink-muted:     #7A8497;
  --ink-inverse:   #F8F6F0;

  --accent:        #FF8E3C;
  --accent-ink:    #1A1207;
  --accent-soft:   #FFE9D6;
  --cool:          #2E6FA7;
  --state-go:      #2E8B57;
  --state-warn:    #C77700;
  --state-stop:    #B8392E;
  --state-info:    #2E6FA7;

  --line-hair:  rgba(11, 17, 24, 0.08);
  --line-rule:  rgba(11, 17, 24, 0.16);
  --line-focus: var(--accent);

  --shadow-statusbar: 0 -1px 12px rgba(11, 17, 24, 0.06);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg-base:       #0B1118;
  --bg-elev-1:     #131A24;
  --bg-elev-2:     #1B2330;
  --bg-overlay:    rgba(232, 236, 242, 0.05);

  --ink-primary:   #E8ECF2;
  --ink-secondary: #A4ADBE;
  --ink-muted:     #6B7588;
  --ink-inverse:   #0B1118;

  --accent:        #FF8E3C;
  --accent-ink:    #1A1207;
  --accent-soft:   rgba(255, 142, 60, 0.14);
  --cool:          #5CC8FF;
  --state-go:      #5ED27A;
  --state-warn:    #F0B240;
  --state-stop:    #E15A5A;
  --state-info:    #5CC8FF;

  --line-hair:  rgba(232, 236, 242, 0.08);
  --line-rule:  rgba(232, 236, 242, 0.18);
  --line-focus: var(--accent);

  --shadow-statusbar: 0 -2px 12px rgba(0, 0, 0, 0.4);
}

/* Respect OS preference unless explicitly overridden via data-theme.
   The theme.js script sets data-theme before paint, so this is a fallback. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg-base: #0B1118;
    --bg-elev-1: #131A24;
    --bg-elev-2: #1B2330;
    --bg-overlay: rgba(232, 236, 242, 0.05);
    --ink-primary: #E8ECF2;
    --ink-secondary: #A4ADBE;
    --ink-muted: #6B7588;
    --ink-inverse: #0B1118;
    --accent-soft: rgba(255, 142, 60, 0.14);
    --cool: #5CC8FF;
    --state-go: #5ED27A;
    --state-warn: #F0B240;
    --state-stop: #E15A5A;
    --state-info: #5CC8FF;
    --line-hair: rgba(232, 236, 242, 0.08);
    --line-rule: rgba(232, 236, 242, 0.18);
    --shadow-statusbar: 0 -2px 12px rgba(0, 0, 0, 0.4);
  }
}