/* ─── Senshin Design Tokens v1 ─────────────────────────────────────────────
   Single source of truth. Every page module must use these variables.
   NEVER hardcode hex values in page modules — always use var(--token-name).
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* Text hierarchy */
  --t1: #1a1a18;
  --t2: #3a3a37;
  --t3: #6b6b67;
  --t4: #9a9a96;
  --t5: #b0b0aa;

  /* Surfaces */
  --surface:  #F7F5F0;
  --card:     #ffffff;
  --bg2:      #fafaf8;
  --bg3:      #f0f0ee;

  /* Borders */
  --bdr:      #e8e8e5;
  --bdr2:     #f0f0ee;

  /* Brand — default Senshin scheme (overridden by theme.js per scheme) */
  --accent:        #1B4F72;
  --accent-hover:  #174466;
  --accent-tint:   rgba(27,79,114,.08);
  --accent-border: rgba(27,79,114,.2);
  --btn-txt:       #ffffff;

  /* Status — RAG */
  --red:          #C0392B;
  --red-strong:   #C0392B;
  --red-tint:     rgba(192,57,43,.07);
  --red-bg:       rgba(192,57,43,.07);
  --red-border:   rgba(192,57,43,.2);

  --amber:        #D4790F;
  --amber-txt:    #b45309;
  --amber-tint:   rgba(212,121,15,.07);
  --amber-bg:     rgba(212,121,15,.07);
  --amber-border: rgba(212,121,15,.2);

  --green:        #1A7A4A;
  --green-tint:   rgba(26,122,74,.07);
  --green-bg:     rgba(26,122,74,.07);
  --green-border: rgba(26,122,74,.2);

  /* AI / Deduced */
  --deduced:        #7C3AED;
  --deduced-tint:   rgba(124,58,237,.08);
  --deduced-bg:     rgba(124,58,237,.06);
  --deduced-border: rgba(124,58,237,.18);

  /* Typography */
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:   'Courier New', Courier, monospace;

  /* Component sizes */
  --btn-height:   28px;
  --btn-radius:   5px;
  --input-height: 32px;
  --input-radius: 6px;
  --card-radius:  8px;
  --pill-radius:  10px;
  --tag-radius:   4px;

  /* Spacing scale */
  --sp1: 4px;
  --sp2: 8px;
  --sp3: 12px;
  --sp4: 16px;
  --sp5: 20px;
  --sp6: 24px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.12);

  /* Nav */
  --nav-width:           216px;
  --nav-collapsed-width: 48px;
  --nav-bg:              #ffffff;
  --nav-mark-txt:        #1B4F72; /* LOCKED — never changes with scheme */
  --nav-strap:           #7E8FA1; /* LOCKED — never changes with scheme */

  /* Sensei panel */
  --sensei-width: 258px;

  /* Transitions */
  --transition-fast:   .1s ease;
  --transition-normal: .18s ease;
  --transition-slow:   .25s ease;
}

/* ─── Dark mode ─────────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --t1: #ccc9c4;
  --t2: #a8a49e;
  --t3: #716e6a;
  --t4: #8a8784;
  --t5: #5a5a56;
  --surface: #1A1714;
  --card:    #24201C;
  --bg2:     #1f1b18;
  --bg3:     #2a2520;
  --bdr:     rgba(255,255,255,.08);
  --bdr2:    rgba(255,255,255,.05);
  --amber-txt:      #D4790F;
  --deduced:        #A78BFA;
  --deduced-tint:   rgba(167,139,250,.1);
  --deduced-bg:     rgba(167,139,250,.06);
  --deduced-border: rgba(167,139,250,.2);
  --nav-bg:         var(--surface);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,.4);
}

/* ─── Colour scheme overrides — applied by theme.js via data-scheme ─────── */
[data-scheme="jade"]  {
  --accent:       #0C6B55;
  --accent-hover: #0a5c48;
  --accent-tint:  rgba(12,107,85,.08);
}
[data-scheme="ume"] {
  --accent:       #8B1852;
  --accent-hover: #7a1548;
  --accent-tint:  rgba(139,24,82,.08);
  --deduced:      #1565C0;
}
[data-scheme="ember"] {
  --accent:       #7A3820;
  --accent-hover: #6b301c;
  --accent-tint:  rgba(122,56,32,.08);
}
/* senshin (default) — :root values apply, no override needed */