/* ============================================================================
   CoverSmart Design System — Design Tokens (single source of truth)
   ----------------------------------------------------------------------------
   All tokens are prefixed --cs-* so they never collide with page-level CSS
   variables that already exist. Load this file FIRST, globally, before any
   page CSS. Components read only from these tokens.

   Brand: "Smart Teal"  ·  Neutrals: blue-biased slate  ·  Semantic: separate
   ============================================================================ */

:root {
  /* ── Brand · Cover Cobalt ───────────────────────────────── */
  --cs-brand-50:  #EEF2FE;
  --cs-brand-100: #DCE3FD;
  --cs-brand-200: #B8C6FB;
  --cs-brand-300: #8FA3F7;
  --cs-brand-400: #5E76F0;
  --cs-brand-500: #2F54EB;   /* base */
  --cs-brand-600: #1E3FD1;   /* base action */
  --cs-brand-700: #1832A6;   /* hover */
  --cs-brand-800: #152A85;   /* active */
  --cs-brand-900: #13245F;
  --cs-brand:        var(--cs-brand-600);
  --cs-brand-hover:  var(--cs-brand-700);
  --cs-brand-active: var(--cs-brand-800);
  --cs-brand-soft:   var(--cs-brand-50);
  --cs-on-brand:     #FFFFFF;

  /* ── Accent (teal) — secondary/data only, use sparingly ──── */
  --cs-accent: #0D9488;

  /* ── Neutrals · Slate (blue-biased grey) ────────────────── */
  --cs-ink:           #0F1729;  /* primary text */
  --cs-ink-2:         #3D4B66;  /* secondary text */
  --cs-ink-3:         #64748B;  /* muted text / captions */
  --cs-border:        #E4E9F2;
  --cs-border-strong: #CBD5E1;
  --cs-bg:            #F5F7FC;  /* app background */
  --cs-surface:       #FFFFFF;  /* cards / panels */
  --cs-surface-2:     #F1F5F9;  /* subtle fills */

  /* ── Semantic (distinct from the brand) ─────────────────── */
  --cs-success: #16A34A;  --cs-success-bg: #E7F6EC;  --cs-success-ink: #0E6B33;
  --cs-warning: #D97706;  --cs-warning-bg: #FDF1E3;  --cs-warning-ink: #92500A;
  --cs-error:   #DC2626;  --cs-error-bg:   #FBEAEA;  --cs-error-ink:   #9F1D1D;
  --cs-info:    #1E3FD1;  --cs-info-bg:    #EEF2FE;  --cs-info-ink:    #152A85;

  /* ── Typography ─────────────────────────────────────────── */
  --cs-font-ui:   'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cs-font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', 'JetBrains Mono', Consolas, monospace;
  --cs-fs-display: 2.5rem;    /* 40 */
  --cs-fs-h1:      2rem;      /* 32 */
  --cs-fs-h2:      1.5rem;    /* 24 */
  --cs-fs-h3:      1.125rem;  /* 18 */
  --cs-fs-body:    1rem;      /* 16 */
  --cs-fs-sm:      0.875rem;  /* 14 */
  --cs-fs-xs:      0.8125rem; /* 13 */
  --cs-fs-label:   0.75rem;   /* 12 */
  --cs-lh-tight: 1.15;
  --cs-lh-snug:  1.35;
  --cs-lh-body:  1.6;

  /* ── Spacing (8-point rhythm) ───────────────────────────── */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 24px;
  --cs-space-6: 32px;
  --cs-space-7: 48px;
  --cs-space-8: 64px;

  /* ── Radius ─────────────────────────────────────────────── */
  --cs-r-sm: 6px;
  --cs-r:    10px;
  --cs-r-lg: 16px;
  --cs-r-pill: 999px;

  /* ── Elevation ──────────────────────────────────────────── */
  --cs-shadow-sm: 0 1px 2px rgba(15,23,41,.06), 0 1px 3px rgba(15,23,41,.08);
  --cs-shadow:    0 4px 12px rgba(15,23,41,.08), 0 2px 4px rgba(15,23,41,.05);
  --cs-shadow-lg: 0 16px 40px rgba(15,23,41,.16);
  --cs-ring: 0 0 0 3px color-mix(in srgb, var(--cs-brand-500) 35%, transparent);

  /* ── Motion / layering ──────────────────────────────────────
     Modal sits above the legacy .modal-overlay in edit-profile.css (z-index 2000)
     so a design-system dialog opened from the sidebar is never buried under it.
     Toast outranks everything — ui.js already reads --cs-z-toast. */
  --cs-transition: .15s ease;
  --cs-z-toast: 9999;
  --cs-z-modal: 2100;
}

/* ── Dark theme ──────────────────────────────────────────────
   Dark mode is OPT-IN via data-theme="dark" (not the OS media query) while the
   app is mid-migration — otherwise a dark-OS user would get a dark navbar over
   still-light pages. Once every page reads from tokens, re-enable the automatic
   @media (prefers-color-scheme: dark) block to follow the OS preference. */
:root[data-theme="light"] {
  --cs-ink:#0F1729; --cs-ink-2:#3D4B66; --cs-ink-3:#64748B;
  --cs-border:#E4E9F2; --cs-border-strong:#CBD5E1;
  --cs-bg:#F5F7FC; --cs-surface:#FFFFFF; --cs-surface-2:#F1F5F9;
  --cs-brand:var(--cs-brand-600); --cs-brand-hover:var(--cs-brand-700);
  --cs-brand-active:var(--cs-brand-800); --cs-brand-soft:var(--cs-brand-50);
  --cs-success-bg:#E7F6EC; --cs-success-ink:#0E6B33;
  --cs-warning-bg:#FDF1E3; --cs-warning-ink:#92500A;
  --cs-error-bg:#FBEAEA; --cs-error-ink:#9F1D1D;
  --cs-info:#1E3FD1; --cs-info-bg:#EEF2FE; --cs-info-ink:#152A85;
}
:root[data-theme="dark"] {
  --cs-ink:#E8EDF7; --cs-ink-2:#AEBAD1; --cs-ink-3:#7C8BA8;
  --cs-border:#24314C; --cs-border-strong:#34456A;
  --cs-bg:#0A0F1C; --cs-surface:#111A2E; --cs-surface-2:#16223A;
  --cs-brand:var(--cs-brand-500); --cs-brand-hover:var(--cs-brand-400);
  --cs-brand-active:var(--cs-brand-300); --cs-brand-soft:#161F3D;
  --cs-success-bg:#0F2A1B; --cs-success-ink:#6EE7A0;
  --cs-warning-bg:#2E2010; --cs-warning-ink:#F5C173;
  --cs-error-bg:#2E1414; --cs-error-ink:#F1A3A3;
  --cs-info-bg:#14224A; --cs-info-ink:#9FB4FF;
  --cs-shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --cs-shadow:0 6px 18px rgba(0,0,0,.45);
  --cs-shadow-lg:0 20px 48px rgba(0,0,0,.6);
}