/* ============================================================================
   Gym Atlas — design tokens (single source of truth)
   Marketing surfaces are light/warm-cream; the in-app phone UI is dark.
   Extracted from brand_system_handoff/tokens; the three text-role light colors
   (--faint / --sand / --accent-ink) are nudged from their brand-reference
   values to clear WCAG AA (>=4.5:1) for small text on cream + white. The
   reference originals are noted inline.
   Back-compat aliases (--lineSoft, --accentInk, --a-*) are defined at the
   bottom so pages written against the older names keep resolving.
   ========================================================================== */
:root {
  /* ---- Families ---------------------------------------------------------- */
  --font-display: 'Archivo', system-ui, sans-serif;     /* headings, stat numbers, app titles (500–800) */
  --font-body: 'Hanken Grotesk', system-ui, sans-serif; /* body, buttons, wordmark (400–700) */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* eyebrows, labels, timestamps (500/700) */

  /* ---- Marketing · light ------------------------------------------------- */
  --bg: #faf8f4;                 /* warm cream page background */
  --surface: #ffffff;            /* white cards + alternating sections */
  --line: #e7e2d9;               /* hairline borders, section dividers */
  --line-soft: #efeae1;          /* softer inner dividers (pricing rows) */
  --ink: #16181a;                /* primary text, dark buttons */
  --muted: #5f646b;              /* body copy, nav links */
  --faint: #6c7178;              /* fine print, footer labels, timestamps (ref #8b9096) */
  --sand: #767161;               /* quietest text: captions, ©, method numbers (ref #b4aea3) */
  --accent-ink: #2977a3;         /* accent on light bg: eyebrows, checks, hovers (ref #2b7aa8) */
  --accent-soft: rgba(134, 207, 245, 0.25); /* member reply bubble on light */
  --accent-chip: #d6ebf9;        /* solid member reply chip over imagery */
  --btn-ink-hover: #2b3035;      /* dark pill button hover */
  --btn-ink-press: #0c0e10;      /* dark pill button pressed */
  --link-press: #1f5b7e;         /* text-link pressed */
  --disabled-bg: #efeae1;        /* disabled fill / hairline, light */
  --disabled-ink: #b4aea3;       /* disabled text, light */
  --focus-ring: rgba(43, 122, 168, 0.35); /* 3px focus-visible ring, light */
  --selection: rgba(134, 207, 245, 0.4);

  /* ---- App · dark (inside the phone mock) -------------------------------- */
  --app-bg: #0b0d11;
  --app-surface: #14171b;        /* cards, tab bar */
  --app-surface-2: #1e2226;      /* avatars, steppers */
  --app-line: #2a2e33;           /* card borders */
  --app-line-soft: #212429;      /* row dividers */
  --app-text: #eff2f5;
  --app-muted: #999fa7;          /* secondary text, mono meta */
  --app-muted-2: #878d95;        /* tab labels, tiniest labels */
  --app-accent: #86cff5;         /* THE app accent: CTAs, rings, active tab */
  --app-accent-hover: #9fd9f8;
  --app-accent-press: #6fc2ef;
  --app-on-accent: #061c31;      /* ink on accent buttons */
  --app-good: #67d283;           /* streak-kept green */
  --app-good-soft: rgba(103, 210, 131, 0.16);
  --app-ring-track: #282d33;     /* progress ring track */
  --app-ring-empty: #3a3e44;     /* unchecked set circle */
  --app-disabled-bg: #1e2226;    /* disabled fill, dark */
  --app-disabled-ink: #52575e;   /* disabled text, dark */
  --app-focus-ring: rgba(134, 207, 245, 0.30); /* 3px focus-visible ring, dark */

  /* ---- Type scale (marketing, desktop 1140) ------------------------------ */
  --type-hero: 700 56px/1.05 var(--font-display);
  --type-h2: 700 38px/1.1 var(--font-display);
  --type-statement: 600 31px/1.35 var(--font-display);
  --type-row-title: 700 25px/1.2 var(--font-display);
  --type-body-lg: 400 17px/28px var(--font-body);
  --type-body: 400 16px/26px var(--font-body);
  --type-ui: 600 15px/1 var(--font-body);
  --type-fine: 400 13.5px/20px var(--font-body);
  --type-eyebrow: 500 11px/1 var(--font-mono);
  --type-caption: 500 10.5px/1 var(--font-mono);
  --type-wordmark: 700 18px/1 var(--font-body);
  --ls-hero: -1.8px;
  --ls-h2: -1.1px;
  --ls-statement: -0.7px;
  --ls-eyebrow: 1.6px;
  --ls-caption: 1.2px;
  --ls-wordmark: -0.2px;

  /* ---- Layout + spacing -------------------------------------------------- */
  --shell-max: 1140px;
  --shell-pad: 48px;
  --shell-pad-sm: 24px;          /* side padding at phone widths */
  --section-pad: 110px;
  --section-pad-dense: 88px;
  --section-pad-sm: 72px;        /* section padding at phone widths */
  --nav-h: 74px;
  --grid-gap-wide: 80px;         /* label | content grids */
  --grid-gap: 72px;              /* hero two-column */
  --gap-row: 64px;               /* method row columns */
  --stack-lg: 26px;
  --stack-md: 16px;
  --stack-sm: 12px;
  --btn-h: 54px;                 /* primary pill */
  --btn-h-sm: 42px;              /* nav pill */
  --btn-h-app: 44px;             /* in-app accent button */

  /* ---- Radii ------------------------------------------------------------- */
  --r-pill: 999px;
  --r-photo: 24px;
  --r-card: 20px;
  --r-card-sm: 18px;
  --r-bubble: 16px;
  --r-bubble-tail: 4px;
  --r-tile: 12px;
  --r-row: 13px;
  --r-chip: 7px;
  --r-phone: 32px;
  --r-logo: 8px;

  /* ---- Shadows (soft, low-alpha, large-blur only) ------------------------ */
  --shadow-card: 0 12px 32px rgba(22, 24, 26, 0.08);
  --shadow-card-strong: 0 12px 32px rgba(22, 24, 26, 0.14);
  --shadow-lg: 0 16px 40px rgba(22, 24, 26, 0.10);
  --shadow-soft: 0 16px 40px rgba(22, 24, 26, 0.06);
  --shadow-reply: 0 8px 24px rgba(22, 24, 26, 0.10);

  /* ---- Semantic aliases -------------------------------------------------- */
  --text-body: var(--muted);
  --text-heading: var(--ink);
  --surface-card: var(--surface);
  --border-default: var(--line);

  /* ---- Back-compat aliases (older landing markup) ------------------------ */
  --lineSoft: var(--line-soft);
  --accentInk: var(--accent-ink);
  --a-bg: var(--app-bg);
  --a-surface: var(--app-surface);
  --a-surface2: var(--app-surface-2);
  --a-line: var(--app-line);
  --a-lineSoft: var(--app-line-soft);
  --a-text: var(--app-text);
  --a-muted: var(--app-muted);
  --a-faint: var(--app-muted-2);
  --a-accent: var(--app-accent);
  --a-ink: var(--app-on-accent);
  --a-good: var(--app-good);
}