/* Operator Studio — Unified Design Tokens
   Single source of truth for all public pages. No build step — plain CSS custom properties.

   ── AESTHETIC: "Swiss × Y2K" (rebuild 2026-06-15) ───────────────────────────
   Swiss/International-Typographic bones — a real 12-col grid, oversized type,
   mathematical 8px spacing, generous whitespace, asymmetric editorial layout,
   ONE accent — fused with Y2K personality: glossy chrome buttons, iridescent /
   holographic indigo-cyan gradients, blob / bubble shapes, soft glow, springy
   retro-futuristic motion, and bento feature cards. Structured AND memorable.

   BRAND LOCK: the single vibrant accent is the locked brand indigo #7179D0 and
   its tints. Y2K's iridescent indigo-cyan informs decorative gradients only;
   the anchor hue never changes. Light-led warm-neutral base so the indigo pops
   Swiss-style; dark theme preserved.

   Type is LOCKED to Archivo (Google) for display + body; the A/B font toggle
   was removed once Archivo was chosen. JetBrains Mono retired; clean system
   mono only where a label truly needs it.
   ─────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Accent — LOCKED brand indigo #7179D0, the single vibrant note ── */
  --accent:        #7179D0;        /* the brand indigo — pills, highlights, fills */
  --accent-2:      #5d66c4;        /* deeper, for hover/borders on light */
  --accent-ink:    #5159bf;        /* darkened indigo for AA text on warm paper */
  --accent-deep:   #ffffff;        /* text that sits ON an indigo pill */
  --accent-dim:    rgba(113,121,208,.14);
  --accent-glow:   rgba(113,121,208,.45);
  --accent-border: rgba(113,121,208,.45);
  --accent-ring:   rgba(113,121,208,.55);
  /* the anchor name kept so legacy refs resolve to the accent */
  --accent-anchor: var(--accent-ink);

  /* ── Y2K iridescent / chrome / glow palette (decorative only) ─────── */
  /* Brand directive 2026-06-18: indigo BLUE band only — hue 225-240°, no violet/purple drift */
  --iri-1: #7179D0;                /* indigo anchor (235°) */
  --iri-2: #9aa0e6;                /* indigo light (235°, lighter lift) */
  --iri-3: #5d66c4;                /* indigo deep (235°, depth) */
  --iri-4: #5159bf;                /* indigo darkest (236°, anchor-dark) */
  /* holographic sweep — all indigo-blue, hue 234-236°, Y2K shimmer via luminosity range */
  --iridescent: linear-gradient(115deg, #5159bf 0%, #7179D0 30%, #9aa0e6 70%, #5d66c4 100%);
  --iridescent-soft: linear-gradient(115deg, rgba(81,89,191,.18), rgba(93,102,196,.14) 45%, rgba(154,160,230,.16));
  /* chrome — warm-neutral metallic bar (browser-mockup UI only) */
  --chrome: linear-gradient(180deg, var(--paper-2) 0%, var(--paper-3) 45%, var(--paper-2) 100%);
  --chrome-edge: rgba(255,255,255,.9);
  /* glossy top-light overlay for buttons / bubbles */
  --gloss: linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 48%);
  --glow-purple: 0 0 0 0 rgba(113,121,208,.45);

  /* ── Warm-neutral paper base (light is primary) ──────────────────── */
  --paper:     #fbfaf7;            /* warm near-white — the page */
  --paper-2:   #f3f0ea;            /* warm card / raised surface */
  --paper-3:   #e7e2d8;            /* warm grey — borders, dividers, frames */
  --warm-line: #ddd8cc;            /* hairline on paper */

  /* ── Near-black ink bands (rhythm) ──────────────────────────────── */
  --ink:       #0e0e0c;            /* the near-black band base */
  --ink-2:     #161613;            /* raised card on a dark band */
  --ink-3:     #232320;            /* dark borders / hairlines */
  --ink-soft:  #2c2c27;

  /* ── Glass (frosted layered cards over imagery) ─────────────────── */
  --glass-light:  rgba(255,255,255,.62);
  --glass-dark:   rgba(22,22,19,.55);
  --glass-border-light: rgba(20,20,16,.10);
  --glass-border-dark:  rgba(255,255,255,.14);

  /* ── Surface aliases (resolve to paper in the default/light system) ─ */
  --bg:        var(--paper);
  --surface:   var(--paper-2);
  --surface-2: #ece8e0;
  --surface-3: var(--paper-3);
  --card:      var(--paper-2);
  --card-hover:#efece4;
  --border:        var(--warm-line);
  --border-soft:   var(--paper-3);   /* alias of --paper-3 — hairline border, 1-step from prior value, negligible */
  --border-w: 1px;

  /* ── Semantic state ─────────────────────────────────────────────── */
  --profit: #2f8f4e; --profit-dim: rgba(47,143,78,.12); --profit-border: rgba(47,143,78,.28);
  --loss: #c0443f;   --loss-dim: rgba(192,68,63,.12);   --loss-border: rgba(192,68,63,.28);
  --warn: #b6800f;   --warn-dim: rgba(182,128,15,.12);  --warn-border: rgba(182,128,15,.28);

  /* ── Text scale (on paper) ──────────────────────────────────────── */
  --text:   #18180f;               /* near-black ink text */
  --text-2: #4a4a3f;               /* warm secondary */
  --text-3: #75726a;               /* warm muted */
  --text-4: #a39e92;               /* faint */
  --muted: var(--text-3);

  /* text literals for use ON dark bands (not theme tokens) */
  --on-dark:   #f6f4ee;
  --on-dark-2: rgba(246,244,238,.74);
  --on-dark-3: rgba(246,244,238,.52);
  --on-ink:    var(--text);

  /* ── Typography — LOCKED to Archivo (font eval closed 2026-06-15) ──────
     Swiss×Y2K runs on ONE grotesk for both display + body (Swiss discipline).
     Archivo is the chosen, locked face; the A/B toggle was removed. */
  --font-archivo:   'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-archivo);
  --font-ui:   var(--font-archivo);
  --font-body: var(--font-archivo);
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Cascadia Mono', Consolas, monospace;
  --chat: var(--font-ui);
  --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;
  --fs-display: clamp(1.9rem, 4.4vw, 2.9rem);
  --fs-hero: clamp(2.2rem, 5.4vw, 3.8rem);
  --fs-hero-sub: clamp(1rem, 3vw, 1.25rem);

  /* ── Spacing & layout ───────────────────────────────────────────── */
  --track-label: .12em;
  --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: 14px; --space-page-x-wide: 18px;
  /* ── Fluid page gutter + outer container (Weave-style spacing, 2026-06-15) ──
     One gutter for the header AND every section: a fluid ~4.5vw inset capped at
     20–80px, inside a wide ~1480px outer container. Inner text/columns stay
     capped so copy breathes edge-to-edge without breaking structure. */
  --page-gutter: clamp(20px, 4.5vw, 80px);
  --page-max: 1480px;
  --space-section: 1.75rem; --space-page-bottom: 5rem;
  --space-panel: 14px; --space-panel-sm: 8px;
  --space-stack-sm: 4px; --space-stack-md: 8px; --space-stack-lg: 12px; --space-stack-xl: 18px;
  --strip: 56px; --nav: 56px;

  /* ── Swiss 12-column grid (mathematical, 8px base) ──────────────── */
  --grid-cols: 12;
  --grid-gap: 24px;
  --grid-gap-sm: 16px;
  --u: 8px;                         /* base spacing unit — everything is a multiple */

  /* ── Y2K motion — springy retro-futuristic easings + timings ─────── */
  --spring:   cubic-bezier(.34,1.56,.64,1);   /* overshoot / bouncy */
  --spring-soft: cubic-bezier(.22,1,.36,1);   /* expo-out, premium glide */
  --ease-snap: cubic-bezier(.2,.7,.3,1);
  --t-fast: .18s; --t-base: .32s; --t-slow: .6s;

  /* Radius — rounded-card / pill / bubble language */
  --r: 10px; --r-card: 20px; --r-lg: 28px; --r-pill: 999px; --r-bubble: 50%;
  --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: 660px; --content-hero: 760px;
  --chart-h: 180px; --chart-pad: 16px; --table-min: 680px;

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

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

  /* ── Shell/status component tokens ──────────────────────────────── */
  --status-footer-h: 34px; --status-footer-bg: rgba(14,14,12,.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 — soft, warm, expensive (no neon glow) ─────────────── */
  --texture-dot: rgba(20,20,15,.05);
  --shadow-panel:   0 10px 30px rgba(28,26,20,.10);
  --shadow-popover: 0 8px 24px rgba(28,26,20,.18);
  /* warm, soft elevation — the layered-card depth of the reference */
  --shadow-card:       0 1px 0 rgba(255,255,255,.6) inset, 0 18px 44px -28px rgba(40,38,28,.42);
  --shadow-card-hover: 0 28px 60px -30px rgba(40,38,28,.40);
  --shadow-float:      0 40px 90px -36px rgba(28,26,18,.55);
  --shadow-glow:       0 14px 40px -14px rgba(40,38,28,.32);

  /* ── UX behavior constants ──────────────────────────────────────── */
  --longpress-ms: 500; --touch-target: 44px; --comment-actions-author: "human";
}

/* ── Dark mode — the dark BAND becomes the whole page ────────────────
   Light is primary (Swiss whitespace lets the indigo pop). Dark inverts: warm
   paper → near-black, ink text → warm off-white. The brand indigo reads on both. */
:root[data-theme="dark"] {
  --paper:   #0e0e0c;
  --paper-2: #161613;
  --paper-3: #232320;
  --warm-line: #2c2c27;
  --bg: var(--paper);
  --surface: var(--paper-2);
  --surface-2: #1d1d19;
  --surface-3: var(--paper-3);
  --card: var(--paper-2);
  --card-hover: #1d1d19;
  --border: #2c2c27;
  --border-soft: #1d1d19;

  --text:   #f6f4ee;
  --text-2: rgba(246,244,238,.74);
  --text-3: rgba(246,244,238,.54);
  --text-4: rgba(246,244,238,.34);
  --muted: var(--text-3);
  --on-ink: var(--text);

  --accent-ink: #9aa0e6;           /* on dark, a lighter indigo reads as text */
  --accent-deep: #ffffff;          /* white ink on the indigo pill, both themes */

  --texture-dot: rgba(255,255,255,.035);
  --shadow-panel:   0 10px 30px rgba(0,0,0,.45);
  --shadow-popover: 0 8px 24px rgba(0,0,0,.6);
  --shadow-card:       0 1px 0 rgba(255,255,255,.04) inset, 0 18px 44px -28px rgba(0,0,0,.7);
  --shadow-card-hover: 0 28px 60px -30px rgba(0,0,0,.7);
  --shadow-float:      0 40px 90px -36px rgba(0,0,0,.8);
  --shadow-glow:       0 14px 40px -14px rgba(0,0,0,.6);
}