/* ============================================================
   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 */

  /* Content cap — canonical max-width for module bodies (CTK 2026-06-28).
     Module bodies are FLUID (width:100%) up to this cap, then centered
     (margin:0 auto) so content grows with the viewport but never sprawls on
     ultra-wide monitors. 1640 = the established CompeteIQ design width; the
     wide-data modules (PartnerIQ, CompeteIQ) share it. Tune here once to
     change the cap app-wide. (WhitespaceIQ 1289 / ExploreIQ 940 keep their
     own intentionally-narrower layout widths.) */
  --content-max: 1640px;

  /* 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"] {
  /* Spec B — Console Chrome dual-spectrum ergonomic palette.
     Comfort Floor (Slate Blue Canvas) — long-session eye-fatigue tuned. */
  --bg-deep: #070f17;
  --bg-mid: #0a1622;
  --bg-rise: #0d1c28;
  --bg: rgba(7,15,23,0.72);

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

  /* Primary Operational Teal — CANONICAL brand teal, standardized to the mobile
     build (#5EE0D2 mint) so both iframes blend into the site shader. */
  --teal: #5EE0D2;
  --teal-bright: #88F5EA;
  --teal-glow: #2DD4BF;
  --amber: #D4A574;
  --amber-warm: #d4a574;
  --rose: #f43f5e;
  --rose-light: #ff7190;
  --blue: #60a5fa;
  --indigo: #818cf8;
  --purple: #a78bfa;  /* Standardized to the mobile lavender (was blue #2563eb). */

  /* Glass panels — TEAL-BLACK comfort surfaces, retinted from navy to match the
     reskinned canvas + sidebar (base rgba(13,28,40), parity with the mobile
     build). Translucent so the shader reads through; borders neutral white. */
  --g-spatial: rgba(13, 28, 40, 0.50);
  --g-ground: rgba(13, 28, 40, 0.65);
  --g-frosted: rgba(13, 28, 40, 0.82);
  --g-elevated: rgba(16, 33, 44, 0.92);
  --g-focus: rgba(94, 234, 212, 0.10);
  --g-dark: rgba(7, 15, 23, 0.65);
  --g-solid: rgba(13, 28, 40, 0.95);

  --g-border: rgba(94, 234, 212, 0.12);
  --g-border-strong: rgba(94, 234, 212, 0.20);
  --g-inset-top: rgba(255, 255, 255, 0.08);
  --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(94, 234, 212, 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"] {
  /* Spec E — Airy Daylight Floor · MOBILE PARITY (2026-06-24). Reverts the Spec D
     deepening: with the Glass Elevation Scale below (--elev-card / --elev-float +
     --inset-meniscus) cards now float on real layered shadow, not floor-contrast — so
     the floor returns to the mobile reference's airy slate (00_theme.jsx shellBg #e7ebf2
     / deepShell #dde3ec). NOTE: lightening the floor WITHOUT the elevation scale below
     re-introduces the Spec D "washed-out" look — the two changes are one unit. */
  --bg-deep: #dde3ec;
  --bg-mid: #e2e7ef;
  --bg-rise: #e7ebf2;
  --bg: #e7ebf2;

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

  --teal: #0d8f86;
  --teal-bright: #0fa89d;
  --teal-glow: #0d9488;
  --amber: #d97706;
  --amber-warm: #b8863e;
  --rose: #e11d48;
  --rose-light: #f43f5e;
  --blue: #2563eb;
  --indigo: #4f46e5;
  --purple: #6d28d9;  /* Standardized to the mobile light lavender (was blue #2563eb). */

  /* Spec C light — opaque white widget cards (high opacity so the backdrop-blur can't
     smear the edge), defined slate hairline borders. */
  --g-spatial: rgba(255, 255, 255, 0.92);
  --g-ground: rgba(255, 255, 255, 0.97);
  --g-frosted: #FFFFFF;
  --g-elevated: #FFFFFF;
  --g-focus: rgba(13, 143, 134, 0.10);
  --g-dark: rgba(15, 23, 42, 0.06);
  --g-solid: #FFFFFF;

  --g-border: rgba(15, 23, 42, 0.13);
  --g-border-strong: rgba(15, 23, 42, 0.20);
  --g-inset-top: rgba(255, 255, 255, 0.9);
  --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(1px * var(--depth)) calc(2px * var(--depth)) rgba(15,23,42, calc(0.05 * var(--depth))), 0 calc(3px * var(--depth)) calc(8px * var(--depth)) rgba(15,23,42, calc(0.07 * var(--depth)));
  --sh-2: 0 calc(2px * var(--depth)) calc(6px * var(--depth)) rgba(15,23,42, calc(0.06 * var(--depth))), 0 calc(10px * var(--depth)) calc(26px * var(--depth)) rgba(15,23,42, calc(0.10 * var(--depth)));
  --sh-3: 0 calc(4px * var(--depth)) calc(10px * var(--depth)) rgba(15,23,42, calc(0.08 * var(--depth))), 0 calc(18px * var(--depth)) calc(48px * var(--depth)) rgba(15,23,42, calc(0.14 * var(--depth)));
  --sh-4: 0 calc(8px * var(--depth)) calc(18px * var(--depth)) rgba(15,23,42, calc(0.10 * var(--depth))), 0 calc(32px * var(--depth)) calc(72px * var(--depth)) rgba(15,23,42, calc(0.18 * 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)));

  /* ── GLASS ELEVATION SCALE (light) · 2026-06-24 ──────────────────────────────
     Single source of truth for light-mode panel depth. Ports the mobile H2_LIGHT
     material (00_theme.jsx shadowAmbient / shadowFloat / insetMeniscus) so desktop
     panels float like mobile's instead of sitting flat-on-flat. Tiering:
       --elev-card   resting panels (cards, chrome bars, score panel, evidence)
       --elev-float  hover / elevated / modal / drawer
       --inset-meniscus  bright specular top edge (Apple-glass meniscus)
       --inset-base      soft contact shadow on the bottom inner edge
     Defined inside [data-theme="light"] ONLY — dark mode never sees these. */
  --elev-card: 0 1px 2px rgba(15,23,42,0.05), 0 10px 26px -8px rgba(15,23,42,0.14), 0 3px 8px -3px rgba(15,23,42,0.08);
  --elev-float: 0 2px 4px rgba(15,23,42,0.06), 0 22px 50px -14px rgba(15,23,42,0.18), 0 8px 16px -6px rgba(15,23,42,0.12);
  --inset-meniscus: inset 0 1px 0 rgba(255,255,255,0.92);
  --inset-base: inset 0 -1px 0 rgba(15,23,42,0.04);

  --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;
}