/* tokens — run 2026-10-23-ahb-plava-landing
   Direction A (user pick): wordmark filled with grainy Plava gradient; cool off-white panels;
   blue only on wordmark, RSVP, focus. Against the brief:
   - crafted      → one strong idea (textured wordmark + ticket card overlap), everything else hairlines
   - engineer-run → JetBrains Mono for every meta/label, ruled rows, no icons-in-squares, no glow blobs
   - welcoming    → generous body size, plain off-white panels instead of black-on-black density
   Brand-fixed: #2367FA / #1130FA / #9FD8FF / #050505 / #0A0A0A / #FFF, Inter Tight + JetBrains Mono. */

:root {
  /* colour roles — dark ground */
  --bg: #050505;
  --surface: #0c0d10;            /* tinted ~3% toward accent hue */
  --border: #23262e;             /* hairlines on dark (≥3:1 not needed: decorative) */
  --border-strong: #3a3f4b;
  --text: #ffffff;
  --text-muted: #a3a9b6;         /* 8.3:1 on --bg */
  --accent: #2367fa;             /* white on it: 4.77:1 ✓ */
  --accent-hover: #1a56dc;       /* white on it: 6.2:1 */
  --on-accent: #ffffff;
  --accent-deep: #1130fa;        /* gradient only */
  --accent-light: #9fd8ff;       /* small accent text on dark: 12.6:1 ✓ (--accent on --bg is 4.27, large text only) */

  /* inverted / light panel — ground + ink named together */
  --panel: #eef1f6;
  --panel-ink: #0a0a0a;          /* 17.6:1 */
  --panel-muted: #4a5163;        /* 7.6:1 on --panel */
  --panel-border: #c9cfdb;
  --panel-btn: #0a0a0a;          /* pill on panel */
  --panel-btn-ink: #ffffff;

  /* pill on dark */
  --btn: #eef1f6;
  --btn-ink: #0a0a0a;

  --focus: #9fd8ff;

  /* the one texture */
  --grad-wordmark:
    radial-gradient(70% 120% at 95% 10%, #9fd8ff 0%, transparent 55%),
    linear-gradient(100deg, #1130fa 0%, #2367fa 45%, #5d93ff 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-opacity: .5;

  /* type — two families, two weights each */
  --font-sans: "Inter Tight", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --w-regular: 400;
  --w-semibold: 600;             /* logo weight */
  --w-mono: 500;

  /* scale ~1.333, fluid between 390 and 1440 */
  --fs-mono-xs: 0.6875rem;                                   /* 11 — card labels, table heads */
  --fs-mono: 0.8125rem;                                      /* 13 — meta lines */
  --fs-sm: 0.9375rem;                                        /* 15 — cell text, footer */
  --fs-body: 1.0625rem;                                      /* 17 */
  --fs-body-l: clamp(1.1875rem, 1rem + 0.6vw, 1.5rem);       /* 19→24 intro, row titles */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);           /* 20→24 cell titles */
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);                  /* 32→48 section heads, statement */
  --fs-label: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);        /* who-it's-for labels */
  --fs-card-date: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);    /* 20→26 mono date */
  --fs-card-big: clamp(3.5rem, 2.6rem + 3.5vw, 5.5rem);      /* 56→88 year */
  --fs-wordmark: min(20.5vw, 19rem);                         /* fills the container width like the ref's BEYOND */
  --fs-wordmark-sm: 19vw;                                    /* phone: 'AI Harness' must fit 342px */
  --fs-footer-giant: clamp(3rem, 0.2rem + 12vw, 11.5rem);

  --lh-tight: 0.88;              /* wordmark */
  --lh-display: 1.02;
  --lh-snug: 1.25;
  --lh-body: 1.55;
  --tr-wordmark: -0.045em;
  --tr-display: -0.028em;        /* brand logo tracking */
  --tr-mono: 0.04em;
  --measure: 62ch;

  /* space — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --gutter: clamp(24px, 2vw, 28px);
  --col-gap: 24px;
  --container: 1440px;
  --section-y: clamp(80px, 10vw, 144px);
  --section-y-tight: clamp(56px, 6vw, 88px);   /* speak-or-host, who-it's-for: rhythm compresses */
  --panel-pad: clamp(24px, 3vw, 40px);
  --nav-h: 64px;
  --nav-h-sm: 56px;

  /* shape */
  --r-panel: 12px;
  --r-card: 10px;
  --r-tile: 4px;
  --r-pill: 999px;
  --hair: 1px;

  /* motion */
  --dur-ui: 180ms;
  --dur-reveal: 500ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nudge: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}