/* videotoolstack.com — design tokens v3 "Bright Studio" (fable-web-standard Phase 1)
   The system, decided once — pivoted 2026-07-19 per Miles's reference (Google Pixel hero: dark→light
   gradient behind a centered subject, clean bright body) and standing note "audience decides, not my taste":
   - Feel: premium tech-launch keynote. Hero = dark top fading to bright, one accent glow behind the subject.
     Body = clean white/paper, generous light, high contrast — bright is the brand, not dark.
   - Type: Space Grotesk (display) + Inter (body) — unchanged, it wasn't the problem.
   - Color: paper-white stage, near-black ink, ONE accent = signal red (works on light AND the dark hero band).
   - Cards: literal credit-card silhouette — fixed aspect ratio, rounded corners, subtle bevel/sheen, "pick me up" hover.
   - Motion: one ease, UI 180ms. Signature moment: the hero's dark-to-light reveal + soft product glow. */

:root {
  /* type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace;
  --fs-sm: 0.8235rem;   /* 14 */
  --fs-base: 1rem;      /* 17 */
  --fs-md: 1.25rem;     /* 21 */
  --fs-lg: 1.5625rem;   /* 27 */
  --fs-xl: 1.953rem;    /* 33 */
  --fs-2xl: 2.75rem;    /* 47 */
  --fs-hero: clamp(2.6rem, 7.5vw, 4.6rem);
  --lh-body: 1.6;
  --lh-display: 1.05;

  /* color — bright paper body */
  --paper: #ffffff;
  --paper-sunken: #f4f3f1;      /* section alternation, cards' resting fill */
  --paper-raised: #ffffff;
  --ink: #15130f;               /* near-black, warm */
  --ink-soft: #55524c;
  --ink-faint: #8a8680;
  --line: #e7e4de;
  --line-strong: #d5d1c8;
  --accent: #e5352b;            /* signal red — tuned for light backgrounds (was --accent-hot on dark) */
  --accent-hot: #c62920;
  --accent-ink: #c62920;        /* readable accent on paper */
  --accent-wash: #fdecea;
  --ok: #1a7f4e;
  --ok-wash: #e9f5ef;

  /* the hero band only — dark-to-light gradient stage, per the Pixel reference */
  --hero-dark: #0f0d0b;
  --hero-mid: #221b17;
  --hero-glow: rgba(229, 53, 43, 0.55);

  /* space (4px steps) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  /* shape & depth */
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 1px 2px rgba(21,19,15,0.06), 0 2px 8px rgba(21,19,15,0.05);
  --shadow-2: 0 4px 10px rgba(21,19,15,0.08), 0 16px 40px rgba(21,19,15,0.10);
  --shadow-card-rest: 0 1px 2px rgba(21,19,15,0.08), 0 6px 16px rgba(21,19,15,0.07);
  --shadow-card-hover: 0 8px 16px rgba(21,19,15,0.10), 0 24px 48px rgba(229,53,43,0.14);
  --glow: 0 0 32px var(--hero-glow);

  /* motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-ui: 180ms;
}