/* Torres Fitness — design tokens.
   Values lifted VERBATIM from Claude Design project
   a4baddc2-5cc8-45f5-a03c-105cec7b8d36 (tokens/colors, typography, spacing),
   flattened into one file so the app has no external stylesheet dependency.
   Webfonts are loaded by a <link> in index.html, not an @import, so the
   font request starts with the document instead of after the CSS parses.

   Reconciled 2026-08-26 against vault/brand/design-tokens/. Every name the
   two share carries the same value. No conflicts. */

:root {
  /* ── Brand core ── */
  --tf-navy:        #131730; /* primary ground: hero backgrounds, headlines */
  --tf-navy-mid:    #1a2040; /* raised navy surface on dark */
  --tf-navy-2:      #1e2545; /* deepest raised navy */
  --tf-blue:        #8EA5CF; /* Soft Blue, primary accent */
  --tf-accent:      #4A6199; /* mid steel blue: wordmark, secondary accent */
  --tf-blue-pale:   #e8eef7;
  --tf-blue-light:  #b3c5e0;

  /* ── Neutrals ── */
  --tf-white:       #ffffff;
  --tf-cream:       #F7F8FC;
  --tf-cream-2:     #EEF0F8;
  --tf-border:      #dde3ee;
  --tf-ink:         #0F1328;
  --tf-text:        #131730;
  --tf-muted:       #6b7494;

  /* ── Functional: muscle-group coding ── */
  --tf-push:        #4A6199;
  --tf-pull:        #C8A84B;
  --tf-legs:        #BF5A4A;
  --tf-core:        #4E9E8A;

  /* ── Semantic aliases ── */
  --surface-page:    var(--tf-cream);
  --surface-card:    var(--tf-white);
  --surface-inset:   var(--tf-cream-2);
  --surface-dark:    var(--tf-navy);
  --text-primary:    var(--tf-ink);
  --text-body:       var(--tf-text);
  --text-secondary:  var(--tf-muted);
  --accent:          var(--tf-blue);
  --accent-strong:   var(--tf-accent);
  --border-hairline: var(--tf-border);

  /* ── Type ── */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'DM Mono', 'SF Mono', ui-monospace, monospace;

  --text-display-xl: 88px;
  --text-display-lg: 64px;
  --text-display-md: 40px;
  --text-display-sm: 28px;
  --text-display-xs: 20px;
  --tracking-display: 0.02em;
  --leading-display: 0.92;

  --text-lg: 18px;
  --text-md: 15px;
  --text-sm: 13px;
  --text-xs: 11px;
  --leading-body: 1.65;
  --leading-tight: 1.3;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-label: 0.14em;
  --tracking-wide:  0.06em;

  /* ── Space, radius, shadow, motion ── */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px;

  --radius-xs: 3px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 20px;
  --radius-round: 100px;

  --shadow-card:       0 2px 20px rgba(19,23,48,0.06);
  --shadow-card-hover: 0 8px 32px rgba(19,23,48,0.10);
  --shadow-raise:      0 12px 40px rgba(19,23,48,0.12);
  --shadow-modal:      0 20px 60px rgba(19,23,48,0.20);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.12s;
  --dur-base: 0.2s;
  --dur-slow: 0.25s;
}