/* ==========================================================================
   SnapCoach — design tokens
   Mirrors lib/core/theme/*.dart 1:1 for color/spacing/radius values.
   Type scale is web-specific (the app's scale is tuned for mobile UI chrome,
   not a marketing hero) but reuses the same two families + weight rhythm.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('../fonts/PlusJakartaSans-VariableFont.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fasthand';
  src: url('../fonts/Fasthand-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand */
  --coral: #F45B69;
  --coral-light: #FFB3BE;
  --coral-dark: #9F1832;
  --violet: #6C63FF;
  --violet-light: #C4BEFF;
  --violet-dark: #2F26B8;
  --gold: #FFD166;
  --gold-light: #FFE7A6;
  --gold-dark: #A36A00;

  --gradient-brand: linear-gradient(90deg, var(--coral), var(--gold));

  /* Surfaces */
  --bg-l1: #0F1117;
  --surface-l2: #111827;
  --surface-l3: #171923;
  --surface-l4: #1E2230;

  /* Text */
  --text-white: #F8FAFC;
  --text-subtle: #D1D5DB;
  --text-muted: #B6BCC8;
  --text-dim: #9CA3AF;

  /* Lines */
  --card-stroke: #383838;
  --success: #22C55E;

  /* Spacing (8pt scale) */
  --sp-xs: 8px;
  --sp-sm: 16px;
  --sp-md: 24px;
  --sp-lg: 32px;
  --sp-xl: 40px;
  --sp-xxl: 48px;
  --sp-xxxl: 96px;

  /* Radii */
  --r-card: 24px;
  --r-button: 20px;
  --r-input: 16px;
  --r-chip: 14px;

  /* Type — Manrope for headings, Plus Jakarta Sans for body, same as app */
  --font-head: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-script: 'Fasthand', cursive;

  /* Retuned 2026-08-23 to actually match a reference hero's real rendered
     size (a literal 48px/56px H1, checked directly — not rem-relative, so
     no root-font-size trick to chase) — the old clamp topped out at 76px
     on a normal desktop viewport, well past that. --fs-hero-sub is a
     hero-only subtitle size for the same reason: --fs-body-lg is shared
     with .section-sub elsewhere on the page and shouldn't shrink with it. */
  --fs-hero: clamp(2.5rem, 1.75rem + 2.2vw, 3.5rem);
  /* Shifted down 2px at every viewport from an earlier 16-18px pass
     (each clamp term reduced by the same 0.125rem) rather than just
     capping the max, so the whole responsive curve moves uniformly. */
  --fs-hero-sub: clamp(0.875rem, 0.775rem + 0.35vw, 1rem);
  --fs-h2: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8125rem;

  --container-max: 1160px;
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}