/*
 * Sabaki Design Tokens — v4.3.8
 *
 * Single source of truth for colour, typography, spacing, radius,
 * shadow, motion, and z-index. Every surface imports this first.
 *
 * Per-feature CSS files MAY define feature-specific tokens
 * (e.g. agent.css --score-strong for research confidence colours)
 * but MUST NOT redeclare any base token defined here.
 *
 * WCAG AA verified via relativeLuminance + contrastRatio formula
 * (locked by tests/platform/regression-v4.3.8-text-contrast.test.js):
 *  --text on --bg                : 19.55:1 (pass AA + AAA)
 *  --text on --surface           : 16.23:1 (pass AA + AAA)
 *  --text-secondary on --bg      :  9.74:1 (pass AA + AAA)
 *  --text-muted on --bg          :  7.13:1 (pass AAA)
 *  --text-muted on --surface     :  6.35:1 (pass AAA)
 *  --text-muted on --surface-2   :  5.34:1 (pass AA normal text)
 *  --text-muted on --surface-hover: 5.12:1 (pass AA normal text)
 *  --accent text (--bg) on --accent : 14.82:1 (pass AA + AAA)
 */
:root {
  /* ── Colour: surface ── */
  --bg: #09090b;
  --surface: #18181b;
  --surface-2: #27272a;
  --surface-hover: #2a2a2e;
  --border: #27272a;
  --control-border: #71717a;
  --border-hover: #3f3f46;

  /* ── Colour: text ── */
  --text: #fafafa;
  --text-secondary: #a1a1aa;
  /* v4.3.8: --text-muted lifted from #8a8a93 to #9a9aa3.
   * History:
   *  v4.3.5 and earlier: #71717a (3.67:1 on --surface, FAILS AA)
   *  v4.3.6: #8a8a93 (5.18:1 on --surface, but only 4.35:1 on
   *          --surface-2 and 4.18:1 on --surface-hover — discovered
   *          in the v4.3.8 contrast sweep)
   *  v4.3.8: #9a9aa3 — minimum 5.12:1 across every surface in the
   *          token set (--bg 7.13:1, --surface 6.35:1, --surface-2
   *          5.34:1, --surface-hover 5.12:1). Distinct from
   *          --text-secondary #a1a1aa to preserve the visual hierarchy.
   *          Locked by regression-v4.3.8-text-contrast.test.js. */
  --text-muted: #9a9aa3;

  /* ── Colour: brand ── */
  --accent: #a3eceb;
  --accent-hover: #c0f4f3;
  --accent-subtle: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 25%, transparent);

  /* ── Colour: prism (gradient accents for visual depth) ── */
  --prism-copper: #c76a2f;

  /* ── Colour: semantic ── */
  --success: #22c55e;
  --success-dark: #15803d;
  --success-mid: #16a34a;           /* Tailwind green-600, used for inline success text/icons */
  --success-light-bg: #bbf7d0;
  --success-subtle: rgba(34, 197, 94, 0.12);
  --warn: #eab308;
  --warn-light-bg: #fde68a;
  --warn-subtle: rgba(234, 179, 8, 0.12);
  --danger: #ef4444;
  --danger-dark: #dc2626;            /* Tailwind red-600, for button hover / inline error text */
  --danger-subtle: rgba(239, 68, 68, 0.12);
  --info: #3b82f6;

  /* ── Colour: tag badges (dashboard leads) — each WCAG AA >= 4.5:1 with --bg text ── */
  --tag-technology: #14b8a6;         /* teal-500 */
  --tag-workforce: #3b82f6;          /* blue-500 (= --info) */
  --tag-business-model: #a855f7;     /* purple-500 */
  --tag-product-service: #f59e0b;    /* amber-500 */
  --tag-thematic: #10b981;           /* emerald-500 */
  --tag-characteristic: #9ca3af;     /* gray-400 */
  --tag-maturity: #818cf8;           /* indigo-400 */
  --tag-customer-type: #f43f5e;      /* rose-500 */
  --tag-regulatory: #f97316;         /* orange-500 */

  /* ── Colour: signal types (feed + leads) ── */
  --signal-partnership: #a78bfa;     /* purple-400 */
  --signal-press: #3b82f6;           /* blue-500 (= --info) */
  --signal-partnership-bg: rgba(139, 92, 246, 0.12);
  --signal-press-bg: rgba(59, 130, 246, 0.12);

  /* ── Colour: utility (light-themed cards — import wizard inside dark modal) ── */
  --import-card-success: #f0fdf4;
  --import-card-danger:  #fef2f2;
  --import-card-neutral: #f9fafb;
  --import-card-success-text: #15803d;  /* WCAG AA: 9.4:1 on #f0fdf4 */

  /* ── Typography: scale (6 canonical sizes) ── */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 32px;
  /* Extensions (documented exceptions only — require premortem rationale): */
  --text-3xl: 36px;  /* Metric values on Overview / auth hero */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800; /* v4.x — landing + Overview H2 weight, distinct from bold (700) and black (900) */

  --line-height-tight: 1.2;
  --line-height-snug: 1.4;
  --line-height-normal: 1.6;

  --font-family-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Spacing: 8pt grid ── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;

  /* ── Shadow ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 24px var(--accent-glow);

  /* ── Motion ── */
  --duration-fast: 150ms;
  --duration-normal: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* ── Z-index ── */
  --z-sticky: 100;
  --z-dropdown: 150; /* v4.x — nav dropdown sits above sticky header, below modals */
  --z-modal: 1000;
  --z-drawer: 1100; /* v4.4.1: Advisor drawer — above modal base so drawer floats above main UI; below toast so toasts still surface. When a modal opens OVER the drawer, drawer gets `.advisor-drawer--modal-stacked` which lowers z-index below --z-modal. */
  --z-toast: 2000;

  /* ── Component widths (v4.4.1) ── */
  --drawer-width: 400px; /* Advisor drawer default width. Mobile overrides to 100vw at --bp-md. */

  /* ── Breakpoints (v4.3.7) ──────────────────────────────────────────────
   * CSS custom properties cannot be used inside @media queries in 2026-
   * era browsers, so these tokens are for human reference + regression-
   * test anchoring only. Every @media rule in the codebase must use the
   * raw pixel value AND cite the token in a sibling comment, e.g.
   *
   *   / * --bp-lg: 768px * /
   *   @media (min-width: 768px) { ... }
   *
   * The regression test at tests/platform/regression-v4.3.7-breakpoint-tokens.test.js
   * enforces the set. Any future @media rule whose pixel
   * value is not in this set fails CI.
   * ──────────────────────────────────────────────────────────────────── */
  --bp-sm: 480px;   /* Small phone — iPhone SE, older Android */
  --bp-md: 640px;   /* Large phone / small tablet — iPhone Plus */
  --bp-lg: 768px;   /* Tablet portrait — hamburger cutover */
  --bp-xl: 1024px;  /* Small laptop / tablet landscape */
  --bp-2xl: 1200px; /* Desktop */
  --bp-3xl: 1440px; /* Large desktop */
}