/* ============================================================
   COLLABIQ — DESIGN TOKENS
   Single source of truth. All colors, type, spacing, depth.
   ============================================================ */

:root {
  /* Type — CTK Q2: drop Satoshi, General Sans primary, Plus Jakarta fallback */
  --font-display: 'General Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'General Sans', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  /* Type scale (clamp = fluid) — tweakable via --type-scale multiplier */
  --type-scale: 0.83;
  --text-3xs: calc(0.625rem * var(--type-scale));
  --text-2xs: calc(0.6875rem * var(--type-scale));
  --text-xs: calc(0.75rem * var(--type-scale));
  --text-sm: calc(0.8125rem * var(--type-scale));
  --text-base: calc(0.9375rem * var(--type-scale));
  --text-lg: calc(1.0625rem * var(--type-scale));
  --text-xl: calc(1.25rem * var(--type-scale));
  --text-2xl: calc(1.5rem * var(--type-scale));
  --text-3xl: calc(1.875rem * var(--type-scale));
  --text-4xl: calc(2.5rem * var(--type-scale));

  /* Spacing */
  --s-1: 0.25rem;  --s-2: 0.5rem;  --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;  --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;

  /* Radius */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px;
  --r-pill: 9999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 150ms;
  --t-norm: 250ms;
  --t-slow: 400ms;

  /* Depth multiplier — Tweak target. 0=flat, 1=default, 2=heavy */
  --depth: 1;

  /* Layout — Tweak target */
  --layout-mode: grid; /* grid | split | canvas */

  /* Grid base */
  --grid-step: 48px;

  /* ── Sonar component palette (theme-shared, V1 sonar inline hex) ──
     Used by buildSonarSVG for quadrant fills, orbital arc strokes, glow
     filter flood-colors, and trackpad accent vars. These are NOT brand
     tokens — the brand teal is --teal #00E5BF. The sonar uses a
     different teal #0d9488 as its component palette so the radar
     instrument reads as a dedicated affordance. */
  --sonar-cdev: #0d9488;     /* CO_DEVELOPMENT */
  --sonar-ppartner: #7c3aed; /* PLATFORM_PARTNERSHIP */
  --sonar-pexp: #3b82f6;     /* PORTFOLIO_EXPANSION */
  --sonar-inlic: #d97706;    /* IN_LICENSING */

  /* Pill active-state fallback (V1 pattern: color-mix(--deal-clr, #4b5563))
     used when --deal-clr is not set on a button — provides a graceful
     neutral-slate fallback instead of currentColor. */
  --pill-active-fallback: #4b5563;
  --pill-active-text: #ffffff;
}

/* ===== DARK MODE (default) ===== */
[data-theme="dark"] {
  --bg-deep: #06101e;
  --bg-mid: #0a1730;
  --bg-rise: #10213a;
  --bg: #06101e;

  --text: #e6edf7;
  --text-muted: rgba(230, 237, 247, 0.62);
  --text-faint: rgba(230, 237, 247, 0.36);

  --teal: #00E5BF;
  --teal-bright: #58efe0;
  --teal-glow: #00e5bf;
  --amber: #D4A574;
  --amber-warm: #d4a574;
  --rose: #f43f5e;
  --rose-light: #ff7190;
  --blue: #2563eb;
  --indigo: #818cf8;
  --purple: #2563eb;  /* CTK Q3: mirror V1 — --purple maps to blue token, NOT lavender. */

  /* Glass surfaces (4 tiers + accents) */
  --g-spatial: rgba(255, 255, 255, 0.04);
  --g-ground: rgba(255, 255, 255, 0.07);
  --g-frosted: rgba(255, 255, 255, 0.13);
  --g-elevated: rgba(255, 255, 255, 0.18);
  --g-focus: rgba(88, 239, 224, 0.10);
  --g-dark: rgba(7, 12, 23, 0.55);
  --g-solid: rgba(15, 23, 42, 0.88);

  --g-border: rgba(255, 255, 255, 0.10);
  --g-border-strong: rgba(255, 255, 255, 0.18);
  --g-inset-top: rgba(255, 255, 255, 0.10);
  --g-inset-bottom: rgba(0, 0, 0, 0.30);

  /* Shadows — multiplied by --depth */
  --sh-1: 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgba(0,0,0, calc(0.18 * var(--depth)));
  --sh-2: 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgba(0,0,0, calc(0.24 * var(--depth)));
  --sh-3: 0 calc(18px * var(--depth)) calc(48px * var(--depth)) rgba(0,0,0, calc(0.30 * var(--depth)));
  --sh-4: 0 calc(32px * var(--depth)) calc(72px * var(--depth)) rgba(0,0,0, calc(0.42 * var(--depth)));
  --sh-glow-teal: 0 0 calc(36px * var(--depth)) rgba(61, 187, 176, calc(0.18 * var(--depth)));
  --sh-glow-amber: 0 0 calc(36px * var(--depth)) rgba(245, 158, 11, calc(0.14 * var(--depth)));
  --sh-glow-rose: 0 0 calc(36px * var(--depth)) rgba(244, 63, 94, calc(0.14 * var(--depth)));

  --grid-line: rgba(255, 255, 255, 0.04);
  --grid-line-strong: rgba(255, 255, 255, 0.07);

  /* ── Phase A: missing V1 tokens (dark) — V1 L11197-11232 verbatim ──
     Eight tokens referenced by V2 source as `var(--XXX)` but never
     defined in [data-theme="dark"]. Without these the browser falls
     back to the var-default (often invalid) and rules silently fail.
     Values mirror V1 dark mode exactly so semantic intent is preserved. */
  --surface: rgba(255, 255, 255, 0.06);   /* V1 L11197 */
  --border-lt: rgba(255, 255, 255, 0.06); /* V1 L11204 */
  --text-1: #e2e8f0;                       /* V1 L11209 */
  --text-s: #94a3b8;                       /* V1 L11214 */
  --text-m: #64748b;                       /* V1 L11215 */
  --navy: #93c5fd;                         /* V1 L11225 — light-blue accent in dark */
  --teal-dark: #2a9d8f;                    /* V1 L11232 */
  --mono: var(--font-mono);                /* alias for legacy V1 var name */

  /* Sonar grid + axis strokes (V1 L26112-26113 dark) */
  --sonar-grid: rgba(255, 255, 255, 0.24);
  --sonar-axis: rgba(255, 255, 255, 0.18);

  /* Discrete tier-badge tokens — dark mode equivalents (CTK Q8). Different
     compositional values from light because alpha tinting on a dark background
     needs higher saturation to read at the same perceptual level. Same hue
     family per tier as V1's light palette. */
  --gold-bg: rgba(217, 119, 6, 0.18);   --gold-tx: #d4a574;
  --slv-bg:  rgba(148, 163, 184, 0.12); --slv-tx:  #cbd5e1;
  --emg-bg:  rgba(217, 119, 6, 0.10);   --emg-tx:  #f59e0b;

  color-scheme: dark;
}

/* ===== LIGHT MODE ===== */
[data-theme="light"] {
  --bg-deep: #ecf0f7;
  --bg-mid: #e3e8f1;
  --bg-rise: #d8dee9;
  --bg: #f1f4f9;

  --text: #0f172a;
  --text-muted: rgba(15, 23, 42, 0.66);
  --text-faint: rgba(15, 23, 42, 0.42);

  --teal: #0d8f86;
  --teal-bright: #0fa89d;
  --teal-glow: #10b981;
  --amber: #d97706;
  --amber-warm: #b8863e;
  --rose: #e11d48;
  --rose-light: #f43f5e;
  --blue: #2563eb;
  --indigo: #4f46e5;
  --purple: #2563eb;  /* CTK Q3: mirror V1 — --purple maps to blue token, NOT lavender. */

  --g-spatial: rgba(255, 255, 255, 0.50);
  --g-ground: rgba(255, 255, 255, 0.62);
  --g-frosted: rgba(255, 255, 255, 0.96);
  --g-elevated: rgba(255, 255, 255, 0.99);
  --g-focus: rgba(13, 143, 134, 0.08);
  --g-dark: rgba(15, 23, 42, 0.06);
  --g-solid: rgba(255, 255, 255, 0.95);

  --g-border: rgba(15, 23, 42, 0.10);
  --g-border-strong: rgba(15, 23, 42, 0.16);
  --g-inset-top: rgba(255, 255, 255, 0.85);
  --g-inset-bottom: rgba(15, 23, 42, 0.05);

  /* Discrete tier-badge tokens (V1 parity — replaces brittle color-mix tints) */
  --gold-bg: #fef3c7;  --gold-tx: #92400e;
  --slv-bg: #f1f5f9;   --slv-tx: #475569;
  --emg-bg: #fff7ed;   --emg-tx: #c2410c;

  /* Phase-pill discrete tokens — V1 source L5085-5115 verbatim port, light theme.
     V1's "Phase 4b hotfix" at line 5090 fixed the issue where dark-mode tints
     (#58efe0 / #60a5fa / #fbbf24 / #34d399) wash out on white. We mirror the
     exact rgba bg / hex text / rgba border triplets here so light-mode .phase-pill
     and .diq-phase-badge variants render with V1-grade contrast. Dark theme keeps
     the existing color-mix tokens (modules.css :: .phase-pill.{p1,p2,p3,p4} dark
     branch). These tokens only consumed under [data-theme="light"]. */
  --phase-p1-light-bg: rgba(124, 58, 237, 0.15);
  --phase-p1-light-tx: #7c3aed;
  --phase-p1-light-bd: rgba(124, 58, 237, 0.30);
  --phase-p2-light-bg: rgba(217, 119, 6, 0.15);
  --phase-p2-light-tx: #b45309;
  --phase-p2-light-bd: rgba(217, 119, 6, 0.30);
  --phase-p3-light-bg: rgba(37, 99, 235, 0.15);
  --phase-p3-light-tx: #1e40af;
  --phase-p3-light-bd: rgba(37, 99, 235, 0.30);
  --phase-p4-light-bg: rgba(13, 143, 134, 0.18);
  --phase-p4-light-tx: #0d8f86;
  --phase-p4-light-bd: rgba(13, 143, 134, 0.35);
  --phase-approved-light-bg: rgba(5, 150, 105, 0.18);
  --phase-approved-light-tx: #047857;
  --phase-approved-light-bd: rgba(5, 150, 105, 0.35);

  /* ── Phase A: missing V1 tokens (light) — V1 L11276-11307 verbatim ──
     Already partially present below (--surface, --text-1, --navy, --mono);
     adding the remaining four (--text-m, --text-s, --border-lt, --teal-dark)
     and aligning hex values to V1 light theme. */
  --surface: rgba(255, 255, 255, 0.7);    /* V1 L11276 */
  --border-lt: rgba(0, 0, 0, 0.05);       /* V1 L11282 */
  --text-1: #0f172a;                       /* V1 L11286 */
  --text-2: #334155;
  --text-3: #64748b;
  --text-4: #94a3b8;
  --text-s: #475569;                       /* V1 L11291 */
  --text-m: #64748b;                       /* V1 L11292 */
  --navy: #0f172a;                         /* V1 L11301 */
  --teal-dark: #0d8f86;                    /* V1 L11307 */
  --mono: var(--font-mono);
  --sans: var(--font-body);

  --sh-1: 0 calc(2px * var(--depth)) calc(8px * var(--depth)) rgba(15,23,42, calc(0.06 * var(--depth)));
  --sh-2: 0 calc(8px * var(--depth)) calc(24px * var(--depth)) rgba(15,23,42, calc(0.08 * var(--depth)));
  --sh-3: 0 calc(18px * var(--depth)) calc(48px * var(--depth)) rgba(15,23,42, calc(0.12 * var(--depth)));
  --sh-4: 0 calc(32px * var(--depth)) calc(72px * var(--depth)) rgba(15,23,42, calc(0.16 * var(--depth)));
  --sh-glow-teal: 0 0 calc(36px * var(--depth)) rgba(13, 143, 134, calc(0.10 * var(--depth)));
  --sh-glow-amber: 0 0 calc(36px * var(--depth)) rgba(217, 119, 6, calc(0.08 * var(--depth)));
  --sh-glow-rose: 0 0 calc(36px * var(--depth)) rgba(225, 29, 72, calc(0.08 * var(--depth)));

  --grid-line: rgba(15, 23, 42, 0.05);
  --grid-line-strong: rgba(15, 23, 42, 0.09);

  /* Sonar grid + axis strokes (V1 L26112-26113 light) */
  --sonar-grid: rgba(15, 23, 42, 0.20);
  --sonar-axis: rgba(15, 23, 42, 0.16);

  color-scheme: light;
}