/* ==========================================================================
   Design tokens — Sasuma
   Fixed brand base (non-negotiable): #000000 bg / #FFFFFF text / #61CE70 accent.
   Everything else is derived from that base to keep the palette disciplined.
   ========================================================================== */

:root {
  /* ---- Color: surfaces ---- */
  --bg: #000000;
  --bg-elevated: #0a0a0a;
  --bg-elevated-2: #161616;
  --bg-elevated-3: #1f1f1f;
  --vignette-edge: #0d0d0d;

  /* ---- Color: borders ---- */
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  /* ---- Color: text ---- */
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.64);
  --text-tertiary: rgba(255, 255, 255, 0.38);

  /* ---- Color: accent ---- */
  --accent: #61ce70;
  --accent-hover: #7bdb88;
  --accent-dim: rgba(97, 206, 112, 0.14);
  --accent-line: rgba(97, 206, 112, 0.35);
  --on-accent: #05130a;
  /* Darker step of the accent — the trough of the animated CTA gradient. */
  --accent-deep: #3ba64f;

  /* ---- Type families ---- */
  --font-display: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-hero: clamp(2.75rem, 1.6rem + 6vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  --fs-lead: clamp(1.05rem, 0.95rem + 0.4vw, 1.375rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.75rem;

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* Headroom bottom-anchored hero content keeps clear of the fixed nav. */
  --hero-top-clearance: 6rem;
  --section-pad: clamp(4rem, 3rem + 5vw, 9rem);

  /* ---- Layout ---- */
  --container-max: 1560px;
  --container-pad: clamp(1.25rem, 0.8rem + 2vw, 3.5rem);
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 20px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;

  /* ---- Z-index ---- */
  --z-scene: 0;
  --z-content: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-intro: 300;
  /* Above the video modal and the intro: the mobile menu covers everything,
     and the cursor dot draws on top of even that. The skip link outranks the
     lot — it has to be reachable from any state. */
  --z-menu: 400;
  --z-cursor: 500;
  --z-skip: 600;
}