/* ============================================
   MODERN FITNESS — Design Tokens
   ============================================ */

:root {
  /* --- Color Palette --- */
  --color-black:        #0a0a0a;
  --color-charcoal:     #111114;
  --color-dark:         #161619;
  --color-surface:      #1c1c20;
  --color-surface-alt:  #222226;
  --color-border:       #2a2a2f;
  --color-border-light: #3a3a40;
  --color-muted:        #6b6b75;
  --color-subtle:       #9999a5;
  --color-body:         #c8c8d0;
  --color-heading:      #f0f0f2;
  --color-white:        #ffffff;

  /* Navy accent — restrained, not electric */
  --color-accent:       #3d5a80;
  --color-accent-light: #4a6d9a;
  --color-accent-dark:  #2c4460;
  --color-accent-glow:  rgba(61, 90, 128, 0.15);

  /* Functional */
  --color-success:      #2a9d5c;
  --color-cta:          #f0f0f2;
  --color-cta-hover:    #ffffff;
  --color-cta-bg:       #f0f0f2;
  --color-cta-bg-hover: #ffffff;

  /* --- Typography --- */
  --font-display: 'Inter Tight', 'Arial Black', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Type scale — mobile first */
  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-lg:    1.125rem;
  --text-xl:    1.25rem;
  --text-2xl:   1.5rem;
  --text-3xl:   2rem;
  --text-4xl:   2.5rem;
  --text-5xl:   3.25rem;
  --text-6xl:   4rem;
  --text-7xl:   5rem;
  --text-hero:  clamp(3rem, 8vw, 7rem);

  --leading-none:    0.9;
  --leading-tight:   1.1;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:   -0.03em;
  --tracking-normal:   0;
  --tracking-wide:     0.05em;
  --tracking-widest:   0.12em;

  /* --- Spacing --- */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;
  --space-6xl:  10rem;

  /* Section spacing */
  --section-pad-y: clamp(4rem, 10vw, 8rem);
  --section-pad-x: clamp(1.25rem, 5vw, 3rem);

  /* Container */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 720px;

  /* --- Layout --- */
  --nav-height: 64px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-pill: 100px;

  /* --- Motion --- */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   500ms;
  --duration-reveal: 800ms;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
}

/* Desktop type scale bump */
@media (min-width: 960px) {
  :root {
    --nav-height: 72px;
  }
}