/* ============================================================
   Titan Strength Gym — design tokens (source of truth)
   Bold & Playful · primary #18181b · accent #dc2626 · bg #faf5ff
   Every neutral is tinted toward cool purple. No pure black or gray.
   ============================================================ */

:root {
  /* Color roles */
  --color-primary: #18181b;
  --color-primary-strong: #27272a;
  --color-primary-deep: #0c0c0d;
  --color-on-primary: #faf5ff;
  --color-on-deep: #faf5ff;
  --color-accent: #dc2626;
  --color-accent-deep: #b91c1c;
  --color-accent-soft: #fce4e4;
  --color-bg: #faf5ff;
  --color-surface: #ffffff;
  --color-surface-sunk: #f0e6f9;
  --color-text: #1c1917;
  --color-text-muted: #57534e;
  --color-line: rgba(24, 24, 27, 0.14);
  --color-line-strong: rgba(24, 24, 27, 0.32);
  --color-on-deep-muted: rgba(250, 245, 255, 0.78);
  --color-line-on-deep: rgba(250, 245, 255, 0.20);

  /* Type */
  --font-display: "Oswald", "Arial Narrow", Impact, sans-serif;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem);
  --fs-xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --fs-display: clamp(2.75rem, 1.9rem + 4.4vw, 5rem);
  --leading-tight: 1.08;
  --leading-snug: 1.45;
  --leading-body: 1.65;
  --measure: 66ch;
  --tracking-tight: -0.02em;

  /* Space */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
  --space-5: 6rem;
  --space-6: 9rem;

  /* Shape & elevation */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-rest: 0 1px 2px rgba(24, 24, 27, 0.08), 0 10px 28px rgba(24, 24, 27, 0.10);
  --shadow-lift: 0 2px 4px rgba(24, 24, 27, 0.10), 0 16px 40px rgba(24, 24, 27, 0.16);

  /* Layout */
  --max-width: 1120px;
  --width-narrow: 46rem;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-slow: 480ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0c0c0d;
    --color-surface: #18181b;
    --color-surface-sunk: #27272a;
    --color-text: #faf5ff;
    --color-text-muted: #a8a29e;
    --color-primary: #18181b;
    --color-primary-strong: #27272a;
    --color-primary-deep: #050505;
    --color-on-primary: #faf5ff;
    --color-on-deep: #faf5ff;
    --color-accent: #dc2626;
    --color-accent-deep: #b91c1c;
    --color-accent-soft: #3a1a1a;
    --color-line: rgba(250, 245, 255, 0.14);
    --color-line-strong: rgba(250, 245, 255, 0.30);
    --color-on-deep-muted: rgba(250, 245, 255, 0.76);
    --shadow-rest: 0 1px 2px rgba(0, 0, 0, 0.30), 0 10px 28px rgba(0, 0, 0, 0.32);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.34), 0 16px 40px rgba(0, 0, 0, 0.44);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-slow: 1ms;
  }
}