/* ============================================================
   tokens.css — design system primitives
   James Mark L. Lapido · jmlapido.com
   Palette: deep charcoal + electric cyan
   ============================================================ */

/* ── Self-hosted variable fonts (SIL OFL) ─────────────────── */

@font-face {
  font-family: 'Space Grotesk';
  src: url('fonts/spacegrotesk-var.woff2') format('woff2-variations');
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrainsmono-var.woff2') format('woff2-variations');
  font-weight: 100 800;
  font-display: swap;
  font-style: normal;
}

:root {
  /* ── Surfaces ───────────────────────────────────────────── */
  --bg: #08090c;
  --bg-1: #0d1016;
  --bg-2: #12161f;
  --bg-3: #181f2b;
  --bg-4: #1f2836;

  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.13);
  --line-3: rgba(255, 255, 255, 0.22);

  /* ── Ink ────────────────────────────────────────────────── */
  --txt: #e9eef6;
  --txt-2: #9aa7b8;
  --txt-3: #626f81;
  --txt-4: #3d4756;

  /* ── Accent: electric cyan ──────────────────────────────── */
  --ac: #22d3ee;
  --ac-hi: #7ce8f7;
  --ac-lo: #0e7490;
  --ac-08: rgba(34, 211, 238, 0.08);
  --ac-15: rgba(34, 211, 238, 0.15);
  --ac-30: rgba(34, 211, 238, 0.3);
  --ac-50: rgba(34, 211, 238, 0.5);
  --ac-glow: rgba(34, 211, 238, 0.42);

  /* Support hue — warm amber, used sparingly for "now"/live states */
  --warm: #fbbf24;

  /* ── Type families ──────────────────────────────────────── */
  --f-dis: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --f-txt: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono: 'JetBrains Mono', 'Cascadia Mono', Consolas, monospace;

  /* ── Fluid type scale ───────────────────────────────────── */
  --t-mega: clamp(3rem, 13vw, 11rem);
  --t-hero: clamp(2.5rem, 8.5vw, 7.5rem);
  --t-h1: clamp(2.1rem, 5.5vw, 4.5rem);
  --t-h2: clamp(1.6rem, 3.4vw, 2.75rem);
  --t-h3: clamp(1.2rem, 2vw, 1.6rem);
  --t-lead: clamp(1.05rem, 1.5vw, 1.3rem);
  --t-body: 1rem;
  --t-sm: 0.875rem;
  --t-xs: 0.78rem;
  --t-2xs: 0.7rem;

  /* Oversized ghost numerals behind sections */
  --t-ghost: clamp(7rem, 28vw, 26rem);

  /* ── Spacing scale (4px base) ───────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Section rhythm — tightens on small screens */
  --sec-y: clamp(5rem, 12vh, 10rem);

  /* ── Layout ─────────────────────────────────────────────── */
  --wrap: 1280px;
  --wrap-narrow: 780px;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --nav-h: 68px;

  /* ── Radii ──────────────────────────────────────────────── */
  --r-sm: 6px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── Elevation ──────────────────────────────────────────── */
  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 8px 24px -8px rgba(0, 0, 0, 0.65);
  --sh-3: 0 24px 64px -16px rgba(0, 0, 0, 0.8);
  --sh-ac: 0 0 0 1px var(--ac-30), 0 8px 32px -8px var(--ac-glow);

  /* ── Motion ─────────────────────────────────────────────── */
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --d-fast: 160ms;
  --d: 280ms;
  --d-slow: 520ms;

  /* ── Stacking ───────────────────────────────────────────── */
  --z-bg: 0;
  --z-figure: 1;
  --z-content: 2;
  --z-nav: 80;
  --z-menu: 90;
  --z-top: 100;
}

/* Motion tokens collapse to zero when the visitor asks for less.
   Every transition/animation in main.css reads these, so honouring
   the preference is a single source of truth rather than scattered
   media queries. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --d-fast: 1ms;
    --d: 1ms;
    --d-slow: 1ms;
  }
}