/* ============================================================
   DESIGN TOKENS — Move Again
   Warm, calm, premium. Never clinical, never gym-hardcore.
   Synthesised from: Bold (agebold.com), Ambrook (refero.design),
   Stella (onstella.com). See project notes for rationale.
   ============================================================ */

:root {
  /* ─── Colors: Canvas & Surfaces (warm, never pure clinical white) ─── */
  --color-canvas: #FBF6EE;
  --color-canvas-alt: #F2E7D6;
  --color-surface: #FFFFFF;
  --color-surface-soft: #FAF3E7;
  --color-surface-clay: #F4E2CE;
  --color-surface-sage: #EAEEDF;
  --color-surface-ink: #2A241E;

  /* ─── Colors: Text ─── */
  --color-ink: #2A241E;
  --color-ink-soft: #5B5045;
  --color-muted: #857A6C;
  --color-on-ink: #FBF6EE;
  --color-on-ink-soft: #C9BFAF;

  /* ─── Colors: Accent (single primary = clay/terracotta, secondary = sage) ─── */
  --color-clay: #B35A34;
  --color-clay-strong: #93432A;
  --color-clay-soft: #E9A87E;
  --color-clay-tint: #F3DCC5;
  --color-sage: #6C7B50;
  --color-sage-strong: #515D3B;
  --color-sage-tint: #E3E8D5;

  /* ─── Colors: Borders ─── */
  --color-border: #E5D8C3;
  --color-border-soft: #EEE3D2;
  --color-border-strong: #2A241E;

  /* ─── Typography: Families ─── */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ─── Typography: Scale (senior-friendly — body never below 16px) ─── */
  --font-size-hero: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);
  --font-size-h1: clamp(2.1rem, 1.6rem + 2vw, 3.1rem);
  --font-size-h2: clamp(1.7rem, 1.4rem + 1.2vw, 2.4rem);
  --font-size-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem);
  --font-size-h4: 1.25rem;
  --font-size-body-lg: 1.25rem;
  --font-size-body: 1.125rem;
  --font-size-small: 1rem;
  --font-size-micro: 0.875rem;
  --font-size-eyebrow: 0.875rem;

  /* ─── Typography: Weights (restraint — display never past 600) ─── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ─── Typography: Line Heights ─── */
  --line-height-tight: 1.12;
  --line-height-snug: 1.32;
  --line-height-body: 1.65;
  --line-height-relaxed: 1.75;

  /* ─── Spacing (8px grid) ─── */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --space-4xl: 8rem;

  /* ─── Border Radius (varied, not uniform) ─── */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ─── Shadows (soft, warm, never harsh black) ─── */
  --shadow-soft: 0 8px 24px -14px rgba(42, 36, 30, 0.22);
  --shadow-card: 0 16px 40px -20px rgba(42, 36, 30, 0.24);
  --shadow-lift: 0 22px 50px -18px rgba(42, 36, 30, 0.28);

  /* ─── Motion ─── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 180ms;
  --duration-base: 260ms;
  --duration-slow: 420ms;

  /* ─── Layout ─── */
  --content-max-width: 1180px;
  --section-padding-y: clamp(3.5rem, 3rem + 3vw, 6rem);
  --page-padding-x: clamp(1.25rem, 1rem + 2vw, 2.5rem);

  /* ─── Z-Index ─── */
  --z-nav: 100;
  --z-overlay: 500;
}