/* ============================================================================
   tokens.css — design tokens, mirrored 1:1 from the Figma variables
   File:  RRUZs7hdvBuHZoPsO7XEsO
   Frames: 40-3 "Landing / Desktop" · 204-431 "Landing / Mobile"

   Every value below is the resolved Figma variable value, not a guess.
   The single exception is --accent-violet (see note in the Color block).
   ========================================================================= */

:root {

  /* ── Color · Dark (the only mode the landing ships in) ─────────────────
     Figma collection: Color/Dark. Hex values verbatim; 8-digit hex is
     kept as rgba() so it composites predictably over the mesh layer.     */
  --bg-base:            #060608;   /* Color/Dark → bg-base            */
  --bg-raised:          #0b0b12;   /* Color/Dark → bg-raised          */
  --bg-inset:           #12121a;   /* Color/Dark → bg-inset           */

  --text-primary:       #f4f4f6;   /* Color/Dark → text-primary       */
  --text-secondary:     #c7c7d0;   /* Color/Dark → text-secondary     */
  --text-muted:         #8b8b96;   /* Color/Dark → text-muted         */
  --text-inverse:       #060608;   /* Color/Dark → text-inverse       */

  --accent-cyan:        #2de2e6;   /* Color/Dark → accent-cyan        */

  /* NOTE: no `accent-violet` variable is bound in either frame — the violet
     in the design reads from a raster mesh gradient, not a token. This hex
     is taken from the two reference HTML files and matches the Figma render.
     If you later publish a violet variable, this is the one line to update. */
  --accent-violet:      #8b5cf6;

  --surface-glass-shell: rgba(255,255,255,0.04);  /* #ffffff0a */
  --surface-glass-core:  rgba(255,255,255,0.08);  /* #ffffff14 */
  --border-hairline:     rgba(255,255,255,0.08);  /* #ffffff14 */
  --border-strong:       rgba(255,255,255,0.14);  /* #ffffff24 */

  /* Ambient mesh glows — derived from the two accents. */
  --glow-violet: rgba(139, 92, 246, 0.50);
  --glow-cyan:   rgba( 45,226,230, 0.45);

  /* ── Spacing · Figma collection: Spacing ─────────────────────────────── */
  --space-3xs:  4px;
  --space-2xs:  8px;
  --space-xs:  12px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 64px;
  --space-3xl: 96px;
  --space-4xl: 120px;

  /* ── Radius · Figma collection: Radius ───────────────────────────────── */
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-2xl:  34px;
  --radius-full: 999px;

  /* ── Typography · Figma collection: Typography ────────────────────────
     Figma's Heading/Title styles name Space Grotesk; the brief specifies
     Clash Display for display type. Clash Display is used here and the
     Figma size / line-height / letter-spacing scale is preserved exactly. */
  --font-display: 'Clash Display', 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Mono/Eyebrow — 11/16, +2.4px tracking */
  --fs-eyebrow: 11px;  --lh-eyebrow: 16px;  --ls-eyebrow: 0.218em;
  /* Mono/Tag — 11/16, +0.6px tracking, weight 500 */
  --fs-tag: 11px;      --lh-tag: 16px;      --ls-tag: 0.055em;
  /* Mono/Nav — 13/18, +0.5px tracking */
  --fs-nav: 13px;      --lh-nav: 18px;      --ls-nav: 0.038em;

  /* Body/Small · Body/Base · Body/Lead */
  --fs-body-sm: 14px;  --lh-body-sm: 20px;
  --fs-body:    16px;  --lh-body:    25px;
  --fs-lead:    22px;  --lh-lead:    31px;
  /* Label/Strong — 15/20, weight 600 */
  --fs-label:   15px;  --lh-label:   20px;

  /* Title/Card — 22/26, −0.2px · Heading/H3 — 28/32, −0.4px
     Heading/H2 — 40/44, −0.8px                                            */
  --fs-title:  22px;   --lh-title:  26px;   --ls-title: -0.009em;
  --fs-h3:     28px;   --lh-h3:     32px;   --ls-h3:    -0.014em;
  --fs-h2:     40px;   --lh-h2:     44px;   --ls-h2:    -0.02em;

  /* Display sizes measured off the frames (no bound variable for these):
     hero H1 ≈ 150px @1440 / 56px @390 · contact H2 ≈ 76px @1440.          */
  --fs-h1:      clamp(3.5rem, 10.4vw, 9.375rem);
  --fs-display: clamp(2rem, 5.3vw, 4.75rem);

  /* ── Effects · Figma collection: Effects ─────────────────────────────── */
  /* Inset/Top-hairline — INNER_SHADOW #FFFFFF17 0 1px 1px */
  --inset-top-hairline: inset 0 1px 1px rgba(255,255,255,0.09);
  --shadow-pill:  0 8px 40px rgba(0,0,0,0.45);
  --shadow-lift:  0 24px 60px -24px rgba(0,0,0,0.75);
  --shadow-reel:  0 40px 120px -30px rgba(139,92,246,0.45),
                  0 20px 60px -20px rgba(0,0,0,0.80);
  --glow-cta:     0 0 0 1px rgba(45,226,230,0.35),
                  0 8px 30px -6px rgba(45,226,230,0.45);

  /* ── Layout ───────────────────────────────────────────────────────────
     Figma desktop content runs x=120…1320 on a 1440 frame → 1200px column. */
  --container: 1200px;
  --gutter:    var(--space-md);
  --nav-h:     84px;   /* pill height + top offset, used for scroll-padding */

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast:  0.3s;
  --dur-base:  0.45s;
  --dur-slow:  0.9s;

  /* Showreel timing — tune these two to re-pace the hero slider. */
  --slide-seconds: 3.4s;
  --fade-seconds:  0.7s;
}