/* ============================================================
   STRATA RC-3 · Design Tokens · Single Source of Truth
   ============================================================
   Light-only, brushed-steel + purple-CTA palette.
   Loaded by every HTML page in the deployment.
   ============================================================ */

:root {
  /* ── BRUSHED-STEEL NEUTRALS ─────────────────────────────── */
  --bg:           #F8F9FA;          /* main app background */
  --bg-card:      #FFFFFF;          /* card / panel surfaces */
  --bg-input:     #F1F3F5;          /* form input backgrounds */
  --bg-hover:     #F1F3F5;          /* hover state on light surfaces */
  --bg-active:    #E9ECEF;          /* active/pressed state */
  --bg-sidebar:   #2A2D34;          /* dark brushed-steel sidebar */
  --bg-sidebar-2: #1F2128;          /* sidebar hover/active darker */
  --bg-header:    #FFFFFF;          /* top header bar */

  /* ── TEXT ───────────────────────────────────────────────── */
  --tx:           #1F2937;          /* primary text on light bg */
  --tx-2:         #4B5563;          /* secondary text */
  --tx-3:         #6B7280;          /* tertiary / muted */
  --tx-4:         #9CA3AF;          /* disabled / hints */
  --tx-on-dark:   #F9FAFB;          /* primary text on dark sidebar */
  --tx-on-dark-2: #D1D5DB;          /* secondary on dark sidebar */
  --tx-on-dark-3: #9CA3AF;          /* tertiary on dark sidebar */

  /* ── BORDERS ────────────────────────────────────────────── */
  --border:        #E5E7EB;
  --border-strong: #D1D5DB;
  --border-dark:   rgba(255,255,255,.08);
  --border-focus:  #6B46C1;

  /* ── BRAND — purple ONLY for CTAs and active states ─────── */
  --purple:        #6B46C1;
  --purple-hover:  #5837A8;
  --purple-light:  #8B5FDB;
  --purple-glass:  rgba(107,70,193,.06);
  --purple-glass2: rgba(107,70,193,.12);
  --purple-line:   rgba(107,70,193,.25);

  /* ── STATUS COLORS ──────────────────────────────────────── */
  --green:    #16A34A;
  --green-bg: rgba(22,163,74,.08);
  --amber:    #D97706;
  --amber-bg: rgba(217,119,6,.08);
  --red:      #DC2626;
  --red-bg:   rgba(220,38,38,.08);
  --teal:     #0891B2;             /* secondary accent (info / charts) */
  --teal-bg:  rgba(8,145,178,.08);

  /* ── GRADIENTS ──────────────────────────────────────────── */
  --steel-gradient:  linear-gradient(180deg, #2D3138 0%, #1F2128 100%);
  --steel-gradient-h: linear-gradient(180deg, #353940 0%, #2A2D34 100%);
  --silver-gradient: linear-gradient(135deg, #F5F7FA 0%, #E5E7EB 100%);

  /* ── TYPOGRAPHY ─────────────────────────────────────────── */
  --font-sans:    'Open Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: 'Roboto Slab', Georgia, serif;
  --font-mono:    'SF Mono', Menlo, Monaco, monospace;

  /* Type scale */
  --fs-xs:  11px;
  --fs-sm:  12px;
  --fs:     14px;
  --fs-md:  16px;
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;

  /* ── RADII ──────────────────────────────────────────────── */
  --r-sm:  6px;
  --r:     10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --r-pill: 999px;

  /* ── SPACING (use as gap/padding/margin) ────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;

  /* ── SHADOWS ────────────────────────────────────────────── */
  --shadow-card:  0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.03);
  --shadow-pop:   0 8px 32px rgba(0,0,0,.12);
  --shadow-modal: 0 25px 50px rgba(0,0,0,.25);
  --shadow-focus: 0 0 0 3px rgba(107,70,193,.15);

  /* ── LAYOUT DIMENSIONS ──────────────────────────────────── */
  --sidebar-w:        240px;
  --sidebar-collapsed: 56px;
  --header-h:         64px;
  --footer-h:         44px;

  /* ── ANIMATION ──────────────────────────────────────────── */
  --t-fast:   120ms;
  --t-base:   180ms;
  --t-slow:   320ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ── BASE RESETS ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs);
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; cursor: pointer; }
a { color: var(--purple); text-decoration: none; }
a:hover { color: var(--purple-hover); text-decoration: underline; }
::selection { background: var(--purple); color: #fff; }

/* Scrollbars (subtle) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--tx-4); }