/* ─────────────────────────────────────────────────────────────────────────────
   CapoScore Design Tokens — v2 (unified light + dark)

   Single source of truth. Used by every page.
   Light is set via [data-theme="light"]; dark is the default :root.
   Toggle at runtime by setting document.documentElement.dataset.theme.
   ───────────────────────────────────────────────────────────────────────────── */

/* ============================================================================
   1. PRIMITIVES — raw values that never change between themes.
   These are the brand's atoms. Themes consume them via semantic tokens below.
   ============================================================================ */
:root {

  /* ── Brand ─────────────────────────────────────────────────────── */
  --capo-action:        #4a90e2;
  --capo-action-hover:  #3578c6;
  --capo-action-press:  #2a63a8;

  --capo-cyan:          #00d4ff;   /* signal */
  --capo-violet:        #9b59b6;   /* neural */
  --capo-cyan-soft:     #4fd1e0;
  --capo-violet-deep:   #764ba2;
  --capo-violet-mid:    #667eea;

  /* Neural gradient — logo, avatars, hero */
  --capo-grad-neural:   linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* Signal gradient — score bars, hero accents */
  --capo-grad-signal:   linear-gradient(135deg, #4a90e2 0%, #4fd1e0 100%);
  /* Brand gradient — cyan → violet, used in marketing */
  --capo-grad-brand:    linear-gradient(135deg, #00d4ff 0%, #9b59b6 100%);
  --capo-grad-brand-h:  linear-gradient(90deg,  #00d4ff 0%, #9b59b6 100%);

  /* ── Risk tiers (semantic, theme-stable) ──────────────────────── */
  --risk-low:           #28a745;   /* 0–30 */
  --risk-low-deep:      #1e7e34;
  --risk-moderate:      #ffc107;   /* 30–70 */
  --risk-moderate-deep: #d39e00;
  --risk-high:          #f97316;   /* 70–90 */
  --risk-high-deep:     #c2410c;
  --risk-severe:        #dc3545;   /* 90–100 */
  --risk-severe-deep:   #b21f2d;

  --risk-low-soft:      rgba(40,167,69,0.12);
  --risk-moderate-soft: rgba(255,193,7,0.14);
  --risk-high-soft:     rgba(249,115,22,0.14);
  --risk-severe-soft:   rgba(220,53,69,0.14);

  /* ── Modality colors (always the same, both themes) ───────────── */
  --mod-face:           #4a90e2;
  --mod-voice:          #9b59b6;
  --mod-heart:          #e11d48;
  --mod-text:           #0ea5e9;

  /* ── Type ─────────────────────────────────────────────────────── */
  --font-sans:    "Inter", "Poppins", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Poppins", "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.8125rem;   /* 13 */
  --text-base:  0.9375rem;   /* 15 — denser, more institutional than 16 */
  --text-md:    1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    1.375rem;    /* 22 */
  --text-2xl:   1.75rem;     /* 28 */
  --text-3xl:   2.25rem;     /* 36 */
  --text-4xl:   3rem;        /* 48 */
  --text-hero:  clamp(2.5rem, 6vw, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug:  1.3;
  --leading-body:  1.55;
  --leading-loose: 1.75;

  --tracking-tight: -0.02em;
  --tracking-flat:   0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ── Spacing (4px scale) ──────────────────────────────────────── */
  --sp-0:   0;
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 96px;
  --sp-13: 128px;

  /* ── Radius ───────────────────────────────────────────────────── */
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   6px;
  --r-lg:   8px;
  --r-xl:  12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-pill: 999px;

  /* ── Motion ───────────────────────────────────────────────────── */
  --dur-instant: 80ms;
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   400ms;
  --dur-slower: 700ms;

  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --ease-emphasized: cubic-bezier(.2,.8,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in:  cubic-bezier(.4,0,1,1);

  /* ── Layout ───────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 880px;
  --container-lg: 1100px;
  --container-xl: 1280px;
  --container-2xl: 1440px;

  --nav-height: 64px;
  --nav-height-mobile: 56px;
  /* Alias used by the payment / order-summary sticky right rail
     (mockup app-pages.html L2456: `position: sticky; top: calc(var(--site-nav-height) + var(--sp-5))`).
     Kept distinct from --nav-height so the rail's offset can drift
     independently if the site nav ever changes height. */
  --site-nav-height: 64px;

  /* ── Z-index ──────────────────────────────────────────────────── */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-nav:     1000;
  --z-modal:   2000;
  --z-toast:   3000;

  /* ── Breakpoints (referenced in @media but exposed for JS) ────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ============================================================================
   2. THEME — DARK (default)
   ============================================================================ */
:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces (back → front) */
  --bg-canvas:      #06091a;   /* page outermost */
  --bg-app:         #0a0d22;   /* main scroll surface */
  --bg-surface:     #111634;   /* card */
  --bg-surface-2:   #161c40;   /* nested card / hover */
  --bg-surface-3:   #1d2452;   /* deepest tonal step */
  --bg-overlay:     rgba(6,9,26,0.72);
  --bg-scrim:       rgba(6,9,26,0.55);
  --bg-tint-action: rgba(74,144,226,0.10);
  --bg-tint-cyan:   rgba(0,212,255,0.10);
  --bg-tint-violet: rgba(155,89,182,0.10);

  /* Text */
  --fg-1: #f5f7fb;   /* primary */
  --fg-2: #c5cbe0;   /* secondary */
  --fg-3: #8b94b3;   /* tertiary / meta */
  --fg-4: #5a6585;   /* disabled / placeholder */
  --fg-on-action: #ffffff;
  --fg-link: #5fa9ff;
  --fg-link-hover: #87bfff;

  /* Borders */
  --border-1: rgba(255,255,255,0.08);   /* hairline divider */
  --border-2: rgba(255,255,255,0.14);   /* default border */
  --border-3: rgba(255,255,255,0.22);   /* emphasized border */
  --border-focus: var(--capo-action);

  /* Action */
  --action: var(--capo-action);
  --action-hover: #5fa3ec;
  --action-press: #3578c6;
  --action-soft: rgba(74,144,226,0.18);
  --action-ring: 0 0 0 4px rgba(74,144,226,0.30);

  /* Body backgrounds */
  --body-bg: var(--bg-app);
  --body-bg-marketing: radial-gradient(ellipse at 50% 0%, #16204a 0%, #0a0d22 50%, #06091a 100%);

  /* Shadows — soft on dark */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-3: 0 12px 32px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  --shadow-4: 0 24px 64px rgba(0,0,0,0.65), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-glow-action: 0 0 32px rgba(74,144,226,0.35);
  --shadow-glow-cyan: 0 0 32px rgba(0,212,255,0.30);

  /* Status (subtle on dark) */
  --status-info-bg:    rgba(74,144,226,0.12);
  --status-info-fg:    #87bfff;
  --status-success-bg: rgba(40,167,69,0.14);
  --status-success-fg: #4ade80;
  --status-warn-bg:    rgba(255,193,7,0.14);
  --status-warn-fg:    #fcd34d;
  --status-danger-bg:  rgba(220,53,69,0.14);
  --status-danger-fg:  #fca5a5;
}

/* ============================================================================
   3. THEME — LIGHT
   ============================================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  /* Surfaces */
  --bg-canvas:      #f1f4fa;
  --bg-app:         #f4f7fc;
  --bg-surface:     #ffffff;
  --bg-surface-2:   #f9fbfe;
  --bg-surface-3:   #eef2f9;
  --bg-overlay:     rgba(15,23,42,0.55);
  --bg-scrim:       rgba(15,23,42,0.40);
  --bg-tint-action: rgba(74,144,226,0.08);
  --bg-tint-cyan:   rgba(0,212,255,0.08);
  --bg-tint-violet: rgba(155,89,182,0.08);

  /* Text */
  --fg-1: #0f1838;
  --fg-2: #3d4863;
  --fg-3: #6b7387;
  --fg-4: #9ca3af;
  --fg-on-action: #ffffff;
  --fg-link: #2563eb;
  --fg-link-hover: #1d4ed8;

  /* Borders */
  --border-1: #eef0f5;
  --border-2: #dfe4ee;
  --border-3: #c5cad9;
  --border-focus: var(--capo-action);

  /* Action */
  --action: var(--capo-action);
  --action-hover: #3578c6;
  --action-press: #2a63a8;
  --action-soft: rgba(74,144,226,0.10);
  --action-ring: 0 0 0 4px rgba(74,144,226,0.20);

  /* Body */
  --body-bg: var(--bg-app);
  --body-bg-marketing: radial-gradient(ellipse at 50% 0%, #ffffff 0%, #f0f4fb 50%, #e8eef9 100%);

  /* Shadows */
  --shadow-1: 0 1px 2px rgba(15,23,42,0.04);
  --shadow-2: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-3: 0 12px 28px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
  --shadow-4: 0 24px 48px rgba(15,23,42,0.14), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-glow-action: 0 8px 24px rgba(74,144,226,0.25);
  --shadow-glow-cyan:   0 8px 24px rgba(0,212,255,0.20);

  /* Status */
  --status-info-bg:    rgba(74,144,226,0.10);
  --status-info-fg:    #1d4ed8;
  --status-success-bg: rgba(40,167,69,0.10);
  --status-success-fg: #15803d;
  --status-warn-bg:    rgba(255,193,7,0.18);
  --status-warn-fg:    #92400e;
  --status-danger-bg:  rgba(220,53,69,0.10);
  --status-danger-fg:  #b91c1c;
}

/* ============================================================================
   4. PREFERS-COLOR-SCHEME respect (only if [data-theme] is unset)
   ============================================================================ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg-canvas:#f1f4fa;--bg-app:#f4f7fc;--bg-surface:#fff;--bg-surface-2:#f9fbfe;--bg-surface-3:#eef2f9;
    --fg-1:#0f1838;--fg-2:#3d4863;--fg-3:#6b7387;--fg-4:#9ca3af;
    --border-1:#eef0f5;--border-2:#dfe4ee;--border-3:#c5cad9;
    --shadow-1:0 1px 2px rgba(15,23,42,0.04);--shadow-2:0 4px 12px rgba(15,23,42,0.08);--shadow-3:0 12px 28px rgba(15,23,42,0.10);
  }
}