/* ══════════════════════════════════════════════════════════════════
   Weaver Design Tokens v1 — 2026-07-10
   Source of truth: brain/06-design/design-language.md (the blueprint)
   Structure: primitives → semantic roles. Pages consume SEMANTIC vars
   only; primitives never appear in page CSS.
   Wiring the site's pages to this file = website intent #4.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Primitives: brand ──────────────────────────────────────────── */
  --weaver-green:        #9fe900;  /* oklch(0.853 0.226 129.1) */
  --weaver-green-bright: #b5ff33;  /* oklch(0.918 0.228 128.6) */
  --weaver-plum:         #582751;  /* oklch(0.357 0.093 333.0) */

  /* ── Primitives: plum-tinted neutrals (no pure grays, ever) ─────── */
  --plum-990: #0d0509;             /* oklch(0.131 0.019 345.8) */
  --plum-960: #160814;             /* oklch(0.162 0.033 332.3) */
  --plum-930: #1e0a1b;             /* oklch(0.185 0.045 333.1) */
  --plum-500: #7a5a75;             /* oklch(0.510 0.058 331.9) */
  --plum-300: #b090ac;             /* oklch(0.692 0.055 330.3) */
  --plum-050: #f2eaf0;             /* oklch(0.945 0.012 334.1) */

  /* ── Semantic: surfaces ─────────────────────────────────────────── */
  --bg:            var(--plum-990);
  --bg-alt:        var(--plum-960);      /* two-surface section alternation */
  --surface-card:  rgba(22, 8, 20, 0.84);
  --surface-input: var(--plum-930);
  --surface-glass: rgba(22, 8, 20, 0.55);
  --blur-glass:    24px;

  /* ── Semantic: text (4 tiers — most text is tier 2–3) ───────────── */
  --text:            var(--plum-050);
  --text-secondary:  var(--plum-300);
  --text-muted:      var(--plum-500);
  --text-faint:      rgba(122, 90, 117, 0.55);
  --on-accent:       var(--plum-990);

  /* ── Semantic: accent ───────────────────────────────────────────── */
  --accent:        var(--weaver-green);
  --accent-hover:  var(--weaver-green-bright);
  --accent-glow:   0 0 20px rgba(159, 233, 0, 0.20), 0 0 40px rgba(159, 233, 0, 0.08);
  /* Glow is rationed: ≤3 glow moments per screen (hero, primary CTA, Weavie). */

  /* ── Semantic: borders (ring-first elevation) ───────────────────── */
  --border:         rgba(88, 39, 81, 0.45);
  --border-strong:  rgba(88, 39, 81, 0.65);
  --border-hairline: rgba(255, 255, 255, 0.06);
  --ring-card: inset 0 0 0 1px var(--border);

  /* ── Semantic: status ───────────────────────────────────────────── */
  --danger:  #ff4757;
  --warning: #ffa502;
  --success: var(--weaver-green);
  --info:    var(--weaver-plum);

  /* ── Type ───────────────────────────────────────────────────────── */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --track-heading: -0.012em;   /* headings under 32px  */
  --track-display: -0.022em;   /* headings 32px and up */
  --track-body:    -0.011em;
  --track-label:    0.05em;    /* uppercase labels     */
  /* Display discipline: Space Grotesk 700 headings; 900 = hero only.   */

  /* ── Space (4-base scale) ───────────────────────────────────────── */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --section-pad-mobile: 64px;
  --section-pad-desktop: 96px;
  --container: 1264px;

  /* ── Radius ladder (jobs, not vibes) ────────────────────────────── */
  --radius-control: 6px;
  --radius-card:    12px;
  --radius-panel:   16px;
  --radius-modal:   24px;
  --radius-pill:    999px;   /* buttons are pills */

  /* ── Shadows (plum-tinted; ring-first, shadow-second) ───────────── */
  --shadow-sm: 0 1px 3px rgba(13, 5, 9, 0.4);
  --shadow-md: 0 4px 16px rgba(13, 5, 9, 0.5);
  --shadow-lg: 0 8px 32px rgba(13, 5, 9, 0.6);

  /* ── Motion (grammar: hover=brightness(1.1), active=scale(.97)) ─── */
  --ease-weaver: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-micro: 120ms;
  --dur-ui:    250ms;   /* hard cap 300ms for UI */
  --dur-overlay: 400ms;
  --dur-page:  500ms;
  /* Animate only transform / opacity / filter / color.                */
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-micro: 0ms; --dur-ui: 0ms; --dur-overlay: 0ms; --dur-page: 0ms; }
}