/*
  DESIGN TOKENS — "Modern Athletic / Black Velvet"
  A dark-canvas system: near-black surfaces, hairline borders instead of
  shadows, one restrained athletic accent. Structurally indebted to Resend's
  black-canvas/hairline-border discipline, re-colored and re-typed for an
  athletic strength-coaching brand (no violet, no dev-tool/code motifs).
  Reusable across future coach builds — re-skin by changing the values here.
*/

:root {
  /* ---- Color: canvas & surfaces ---- */
  --color-canvas: #0c0b09;      /* primary page background — near-black, warm undertone */
  --color-surface-raised: linear-gradient(165deg, #1e1811 0%, #0c0b09 100%);
  /* used only for elevated visual anchors (media panels) — everything else
     (cards, inputs, footer) sits flush on --color-canvas, separated by a
     hairline border only, never a fill — this is the Resend-style discipline. */

  /* ---- Color: text (dark-on-light inverted: light-on-dark) ---- */
  --color-text-primary: #f5f1e8;   /* headings, button labels, primary reading color */
  --color-text-body: #cdc7b8;      /* body copy */
  --color-text-muted: #948d7b;     /* tertiary / metadata */
  --color-text-faint: #4d493d;     /* watermark numerals, lowest-emphasis marks */

  /* ---- Color: accent ---- */
  --color-accent: #1d5fd6;        /* solid fills — primary buttons, dot markers */
  --color-accent-strong: #163f9c; /* hover/pressed state on solid accent fills */
  --color-accent-glow: #4c86ff;   /* accent used AS TEXT/border on dark surfaces — AA-safe on near-black */

  /* ---- Color: borders ---- */
  --color-hairline: rgba(245, 241, 232, 0.14);
  --color-hairline-strong: rgba(245, 241, 232, 0.26);

  /* ---- Fonts ---- */
  --font-display: "Archivo", "Arial Narrow", Arial, sans-serif; /* headlines */
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* body / UI */
  --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* labels, numerals, eyebrows */

  /* ---- Type scale (fluid, mobile-first) ---- */
  --text-display: clamp(2.5rem, 5.5vw + 1rem, 4.75rem);
  --text-h2: clamp(1.875rem, 3vw + 1rem, 2.75rem);
  --text-h3: clamp(1.25rem, 1vw + 1rem, 1.625rem);
  --text-body-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.1875rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.75rem;
  --text-numeral-lg: clamp(2.75rem, 6vw, 4.5rem);

  /* ---- Spacing scale (base 4px) ---- */
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;

  /* ---- Layout ---- */
  --page-max-width: 1180px;
  --section-pad-y: clamp(3.5rem, 8vw, 7.5rem);
  --section-pad-x: clamp(1.25rem, 5vw, 2.5rem);

  /* ---- Radius (restrained — sharp, structured, not SaaS-rounded) ---- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
}