/* Operator Studio — Unified Design Tokens
   Single source of truth for all public pages.
   Purple accent, dark institutional palette. No build step — plain CSS custom properties.
   Unified 2026-05-23 — merged the legacy dashboard + public page tokens. */

:root {
  /* ── Core palette ──── */
  --accent: #7179D0;
  --accent-dim: rgba(113,121,208,.10);
  --accent-glow: rgba(113,121,208,.18);
  --accent-border: rgba(113,121,208,.28);
  --accent-ring: rgba(113,121,208,.65);

  --bg: #0a0a0a;
  --surface: #141414;
  --surface-2: #1a1a1a;
  --surface-3: #242424;
  --card: var(--surface);
  --card-hover: var(--surface-2);
  --border: #242424;
  --border-soft: #1a1a1a;
  --border-w: 1px;

  /* ── Semantic ────────────────────────────────────────────────── */
  --profit: #22c55e;
  --profit-dim: rgba(34,197,94,0.12);
  --profit-border: rgba(34,197,94,0.28);
  --loss: #e5484d;
  --loss-dim: rgba(229,72,77,0.12);
  --loss-border: rgba(229,72,77,0.28);
  --warn: #f59e0b;
  --warn-dim: rgba(245,158,11,0.12);
  --warn-border: rgba(245,158,11,0.28);

  /* ── Text scale ──────────────────────────────────────────────── */
  --text: #f4f4f5;
  --text-2: #c7c7cc;
  --text-3: #8e8e93;
  --text-4: #5c5c60;
  --muted: var(--text-3);

  /* ── Typography ──────────────────────────────────────────────── */
  /* Archivo: Vercel's font, designed for developer/data interfaces — works at all sizes */
  --font-ui: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --chat: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sans: var(--font-ui);
  --body: var(--font-body);
  --mono: var(--font-mono);
  --display: var(--font-display);

  /* ── Font sizes ──────────────────────────────────────────────── */
  --fs-xxs: 9px;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-md: 12px;
  --fs-body: 13px;
  --fs-label: 11px;
  --fs-value: 15px;
  --fs-title: 16px;
  --fs-feature: 18px;
  --fs-metric: 20px;
  --fs-kpi: 22px;
  /* Editorial display jump — the largest step, above kpi. Referenced by
     proof/index.html (was undefined: real bug). Fluid, on the locked ratio. */
  --fs-display: clamp(1.75rem, 4vw, 2.6rem);
  --fs-hero: clamp(2rem, 5vw, 3.5rem);
  --fs-hero-sub: clamp(1rem, 3vw, 1.25rem);

  /* ── Spacing & layout ────────────────────────────────────────── */
  --track-label: .08em;
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 10px;
  --space-6: 12px;
  --space-7: 14px;
  --space-8: 16px;
  --space-10: 20px;
  --space-12: 24px;
  --space-16: 32px;
  --space-page-x: 12px;
  --space-page-x-wide: 16px;
  --space-section: 1.5rem;
  --space-page-bottom: 5rem;
  --space-panel: 12px;
  --space-panel-sm: 8px;
  --space-stack-sm: 4px;
  --space-stack-md: 8px;
  --space-stack-lg: 12px;
  --space-stack-xl: 16px;
  --strip: 48px;
  --nav: 52px;
  --r: 6px;
  --control-min: 44px;
  --control-pad-x: 12px;
  --control-pad-x-sm: 8px;
  --control-pad-x-lg: 14px;
  --content-sm: 680px;
  --content-md: 760px;
  --content-lg: 900px;
  --content-xl: 1180px;
  --content-readable: 680px;
  --content-hero: 720px;
  --chart-h: 180px;
  --chart-pad: 16px;
  --table-min: 680px;

  /* ── Breakpoints ─────────────────────────────────────────────── */
  --bp-mobile: 560px;
  --bp-tablet: 760px;
  --bp-desktop: 980px;

  /* ── Z-index scale ───────────────────────────────────────────── */
  --shell-z: 80;
  --shell-topbar-z: 200;
  --status-footer-z: 200;

  /* ── Shell/status component tokens ───────────────────────────── */
  --status-footer-h: 34px;
  --status-footer-bg: rgba(10,10,10,0.96);
  --status-footer-blur: 14px;
  --status-footer-gap: 14px;
  --status-footer-pad-x: 12px;
  --status-footer-fs: 11px;
  --status-dot-size: 7px;
  --status-dot-glow-profit: 0 0 12px var(--profit-dim);
  --status-dot-glow-warn: 0 0 12px var(--warn-dim);

  /* ── Effects ─────────────────────────────────────────────────── */
  --texture-dot: rgba(255,255,255,.025);
  --shadow-panel: 0 10px 30px rgba(0,0,0,0.18);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.55);

  /* ── Phase palette — RELOCATED to proof/cockpit-tokens.css ──────────
     The 5 Research→Design→Plan→Execute→Review hues are a cockpit/proof-surface
     concern only (the graduation stepper). They were unused on every public page
     yet drove the distinct-hex count over the rubric bar. The public marketing +
     legal pages now resolve to one accent on near-black + dark state colors only.
     Proof/cockpit pages must additionally load /proof/cockpit-tokens.css. */
}

/* ── Light mode overrides ──────────────────────────────────────── */
:root[data-theme="light"] {
  --bg:            #ffffff;
  --surface:       #f5f5f7;
  --surface-2:     #ebebef;
  --surface-3:     #e2e2e7;
  --border:        #d1d1d6;
  --border-soft:   #e9e9ec;
  --text:          #1a1a1e;
  --text-2:        #3a3a3d;
  --text-3:        #6e6e73;
  --text-4:        #aeaeb2;
  --muted:         var(--text-3);
  --card:          var(--surface);
  --card-hover:    var(--surface-2);
  --accent:        #474da0;
  --accent-dim:    rgba(71,77,160,.06);
  --accent-glow:   rgba(71,77,160,.12);
  --accent-border: rgba(71,77,160,.20);
  --accent-ring:   rgba(71,77,160,.55);
  /* Light-mode state colors (profit/loss/warn) — RELOCATED to proof/cockpit-tokens.css.
     State pills, tags, dots and the proof-row only render on the operator/proof
     surface; no public marketing or legal page shows a state color. Keeping the
     three light-mode WCAG variants out of the shared layer holds the public palette
     under the rubric's ≤24-hex bar without touching any locked dark-mode value. */
  --shadow-panel:  0 10px 30px rgba(0,0,0,.06);
  --shadow-popover:0 8px 24px rgba(0,0,0,.15);
  --texture-dot: rgba(0,0,0,.045);

  /* ── UX behavior constants ────────────────────────────────────────── */
  /* JS reads these via getComputedStyle so they stay in one place.      */
  --longpress-ms: 500;        /* touch-hold ms before long-press action menu */
  --touch-target: 44px;       /* minimum tap target per WCAG / Apple HIG     */
  --comment-actions-author: "human"; /* only this author sees edit/delete     */
}