/* ==========================================================================
   Gen 0 tokens
   Source: Figma "Master - 2025 Portfolio Site" (xxa9LIoMlgILHPtlsIjSDu) variables,
   which match the live Framer site. Names mirror the Figma variable paths.
   ========================================================================== */

:root {
  /* Color: text */
  --text-neutral-primary: #1e1e1e;
  --text-neutral-secondary: #757575;
  --text-brand-primary: #2c2c2c;
  --text-brand-secondary: #444444;
  --text-brand-on-brand: #f5f5f5;
  --text-placeholder: #6b6b6b;      /* Figma uses #b3b3b3; darkened to pass 4.5:1 on #f5f5f5 */

  /* Color: surface */
  --surface-neutral-primary: #ffffff;
  --surface-neutral-tertiary: #f5f5f5;
  --surface-neutral-secondary-hover: #e6e6e6;
  --surface-brand-primary: #2c2c2c;
  --surface-brand-primary-hover: #1e1e1e;
  --surface-cream: #f3ede0;

  /* Color: border */
  --border-neutral-primary: #d9d9d9;
  --border-brand-primary: #2c2c2c;
  --border-disabled: #b3b3b3;

  /* Color: accents */
  --verizon-red: #ee0000;
  --focus-ring: #0a58ca;

  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --type-hero: clamp(2.5rem, 1.5rem + 4.2vw, 5rem);            /* 40 → 80 */
  --type-section: clamp(2rem, 1.8rem + 0.8vw, 2.5rem);         /* 32 → 40 */
  --type-subsection: clamp(1.625rem, 1.5rem + 0.5vw, 2rem);    /* 26 → 32 */
  --type-body: 1rem;
  --type-body-small: 0.875rem;
  --type-caption: 0.75rem;

  --tracking-hero: -0.02em;       /* -1.6px at 80px */
  --tracking-section: -0.01em;    /* -0.4px at 40px, -0.32px at 32px */
  --tracking-eyebrow: 0.05em;     /* 0.6px at 12px */

  /* Space (Figma Space/0 … Space/2400) */
  --space-100: 4px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-600: 24px;
  --space-800: 32px;
  --space-1200: 48px;
  --space-2400: 96px;

  /* Radius */
  --radius-200: 8px;
  --radius-300: 12px;
  --radius-400: 16px;
  --radius-full: 9999px;

  /* Layout */
  --page-max: 1200px;
  --col-reading: 792px;
  --col-narrow: 588px;
  --col-side: 384px;
  --gutter: clamp(16px, 8.33vw, 120px);   /* 120 at 1440 */
  --section-gap: clamp(64px, 6.67vw, 96px);

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-fast: 150ms;
}