/* ==========================================================================
   Design tokens — the single source of truth for the TSU visual system.
   Corporate-minimal dark: near-black neutral surfaces, roomy rounded cards,
   soft borders, crisp motion. TSU's Soviet-red accent kept throughout.
   ========================================================================== */
:root {
  /* --- Base surfaces (near-black neutral, faint cool undertone) --- */
  --bg:            #0e1012;  /* page background */
  --bg-alt:        #131518;
  --surface:       #1a1d20;  /* cards / modules */
  --surface-2:     #22262a;  /* inset wells, fields */
  --surface-hover: #2a2f34;
  --overlay:       rgba(5, 7, 9, 0.80);

  /* --- Card / module chrome --- */
  --panel-bg:           #1a1d20;
  --panel-header-bg:    #1a1d20;                 /* header shares card surface */
  --panel-toolbar-bg:   #17191c;
  --panel-border:       rgba(235, 241, 245, 0.08); /* soft edge, no hard lines */
  --panel-border-inner: rgba(235, 241, 245, 0.06);
  --titlebar-h:         52px;
  --dock-gap:           16px;

  /* --- Sidebar --- */
  --sidebar-bg:         #101214;
  --sidebar-border:     rgba(235, 241, 245, 0.07);
  --sidebar-item:       #a4aeb7;
  --sidebar-item-hover: rgba(255, 255, 255, 0.05);
  --sidebar-item-active-bg: rgba(230, 57, 70, 0.14);
  --topbar-bg:          rgba(14, 16, 18, 0.86);

  /* Composite chrome colours */
  --header-scrolled-bg: rgba(16, 18, 20, 0.82);
  --nav-mobile-bg:      rgba(16, 18, 20, 0.97);
  --glow-red:           rgba(230, 57, 70, 0.10);
  --glow-blue:          rgba(74, 168, 255, 0.07);
  --grid-line:          rgba(235, 241, 245, 0.025);
  --card-grad-2:        var(--bg-alt);
  --scrim:              rgba(0, 0, 0, 0.55);
  --avatar-fallback:    linear-gradient(135deg, var(--primary), var(--primary-active));
  --scrollbar-thumb:       rgba(235, 241, 245, 0.14);
  --scrollbar-thumb-hover: rgba(235, 241, 245, 0.26);

  /* --- Borders / dividers --- */
  --border:        rgba(235, 241, 245, 0.08);
  --border-strong: rgba(235, 241, 245, 0.16);
  --border-gold:   rgba(228, 185, 91, 0.30);

  /* --- Text --- */
  --text:          #f2f5f7;  /* hero / headings */
  --text-secondary:#a8b2ba;  /* body */
  --text-muted:    #6f7c86;  /* inactive / captions */
  --text-inverse:  #101214;

  /* --- Brand accents --- */
  --primary:       #e63946;  /* Soviet red */
  --primary-hover: #f0555f;
  --primary-active:#c1121f;
  --primary-soft:  rgba(230, 57, 70, 0.12);
  --primary-ring:  rgba(230, 57, 70, 0.40);

  --gold:          #e4b95b;
  --gold-soft:     rgba(228, 185, 91, 0.14);

  /* --- Status --- */
  --success:       #3ddc97;
  --success-soft:  rgba(61, 220, 151, 0.12);
  --warning:       #f2b24b;
  --warning-soft:  rgba(242, 178, 75, 0.12);
  --danger:        #e5484d;
  --danger-soft:   rgba(229, 72, 77, 0.12);
  --info:          #4aa8ff;
  --info-soft:     rgba(74, 168, 255, 0.12);

  /* --- Typography --- */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Tight", "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   1.375rem;
  --fs-xl:   1.75rem;
  --fs-2xl:  2.25rem;
  --fs-3xl:  3rem;
  --fs-4xl:  clamp(2.75rem, 6vw, 4.5rem);

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-base:  1.6;

  --ls-tight: -0.02em;
  --ls-wide:  0.08em;
  --ls-caps:  0.14em;

  /* --- Spacing scale --- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* --- Radii (roomy, corporate) --- */
  --radius-sm: 8px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* --- Shadows (soft, low-contrast lift) --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow:    0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
  --shadow-primary: 0 10px 26px rgba(230, 57, 70, 0.26);

  /* --- Motion --- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 140ms var(--ease);
  --transition:      240ms var(--ease);
  --transition-slow: 480ms var(--ease-out);

  /* --- Layout --- */
  --container: 1200px;
  --container-narrow: 900px;
  --header-h: 68px;
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 56px;
  --z-sidebar: 90;
  --z-header: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition: 0ms;
    --transition-slow: 0ms;
  }
}

/* ==========================================================================
   Light theme — same corporate system in daylight: white cards on a cool
   grey page. Applied via <html data-theme="light"> (set by prefs.js).
   ========================================================================== */
:root[data-theme="light"] {
  --bg:            #eef0f3;
  --bg-alt:        #f5f6f8;
  --surface:       #ffffff;
  --surface-2:     #f0f2f5;
  --surface-hover: #e4e8ec;
  --overlay:       rgba(255, 255, 255, 0.84);

  --panel-bg:           #ffffff;
  --panel-header-bg:    #ffffff;
  --panel-toolbar-bg:   #f7f8fa;
  --panel-border:       rgba(16, 24, 32, 0.09);
  --panel-border-inner: rgba(16, 24, 32, 0.06);

  --sidebar-bg:         #ffffff;
  --sidebar-border:     rgba(16, 24, 32, 0.09);
  --sidebar-item:       #47545e;
  --sidebar-item-hover: rgba(16, 24, 32, 0.05);
  --sidebar-item-active-bg: rgba(230, 57, 70, 0.10);
  --topbar-bg:          rgba(255, 255, 255, 0.82);

  --header-scrolled-bg: rgba(255, 255, 255, 0.85);
  --nav-mobile-bg:      rgba(255, 255, 255, 0.97);
  --glow-red:           rgba(230, 57, 70, 0.08);
  --glow-blue:          rgba(74, 168, 255, 0.08);
  --grid-line:          rgba(16, 24, 32, 0.035);
  --card-grad-2:        #f6f8fa;
  --scrim:              rgba(9, 23, 38, 0.38);
  --scrollbar-thumb:       rgba(16, 24, 32, 0.18);
  --scrollbar-thumb-hover: rgba(16, 24, 32, 0.32);

  --border:        rgba(16, 24, 32, 0.10);
  --border-strong: rgba(16, 24, 32, 0.18);
  --border-gold:   rgba(180, 134, 11, 0.35);

  --text:          #131a20;
  --text-secondary:#45525c;
  --text-muted:    #707e89;
  --text-inverse:  #ffffff;

  --primary-soft:  rgba(230, 57, 70, 0.10);
  --gold:          #b07d0a;
  --gold-soft:     rgba(176, 125, 10, 0.14);

  --success-soft:  rgba(22, 163, 116, 0.14);
  --warning-soft:  rgba(200, 138, 20, 0.16);
  --danger-soft:   rgba(212, 40, 46, 0.12);
  --info-soft:     rgba(30, 120, 210, 0.12);
  --success:       #12996a;
  --warning:       #b9791a;
  --danger:        #d1272d;
  --info:          #1e78d2;

  --shadow-sm: 0 1px 2px rgba(9, 23, 38, 0.10);
  --shadow:    0 8px 24px rgba(9, 23, 38, 0.10);
  --shadow-lg: 0 20px 50px rgba(9, 23, 38, 0.14);
  --shadow-primary: 0 10px 26px rgba(230, 57, 70, 0.20);
}

/* Light-theme component touch-ups that can't be pure token swaps. */
:root[data-theme="light"] .bg-glow { opacity: 0.3; }
:root[data-theme="light"] .card,
:root[data-theme="light"] .stat,
:root[data-theme="light"] .secret-card {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
:root[data-theme="light"] .contact-preview { background: var(--surface-2); }

/* ==========================================================================
   Colour-blind friendly mode — separates status meaning by hue AND keeps
   red/green distinguishable (green → teal-blue). Toggled via data-cvd="on".
   ========================================================================== */
:root[data-cvd="on"] {
  --success:       #2f9bd6;
  --success-soft:  rgba(47, 155, 214, 0.16);
  --warning:       #e79a2b;
  --warning-soft:  rgba(231, 154, 43, 0.16);
  --danger:        #e5484d;
  --danger-soft:   rgba(229, 72, 77, 0.16);
  --info:          #8a6dff;
  --info-soft:     rgba(138, 109, 255, 0.16);
}
:root[data-cvd="on"][data-theme="light"] {
  --success:       #167aa8;
  --warning:       #b8791a;
  --danger:        #c62828;
  --info:          #5b3fd6;
}