/* ============================================================
   EFE DESIGN TOKENS
   Elite Fitness Evolution — Design System v1.0
   ============================================================ */

:root {

  /* --- COLOR PALETTE --- */

  /* Backgrounds */
  --c-bg:          #141716;   /* Matte Black — primary dark background */
  --c-bg-2:        #1E211F;   /* Charcoal — secondary surface, alternating sections */
  --c-bg-3:        #252927;   /* Elevated charcoal for hover states, cards */
  --c-bg-footer:   #0F110F;   /* Near-black footer */

  /* Brand Green */
  --c-green:       #1C4233;   /* Deep Forest Green — primary brand accent */
  --c-green-dark:  #173C2D;   /* Darker forest — use for green section backgrounds */
  --c-green-mid:   #1F4A38;   /* Mid-range green */
  --c-green-light: #214A38;   /* Light end of green range */

  /* Light surfaces */
  --c-ivory:       #F4F1E8;   /* Warm Ivory — primary light text & light surfaces */
  --c-ivory-warm:  #EDE9DF;   /* Slightly warmer ivory for variation */
  --c-ivory-dim:   #D8D4C8;   /* Dimmed ivory for disabled states */

  /* Text */
  --c-text-primary:   #F4F1E8;   /* Primary text on dark */
  --c-text-secondary: #B2B5AE;   /* Body copy, descriptions on dark */
  --c-text-muted:     #9A9D98;   /* Labels, captions, metadata */
  --c-text-inverse:   #0D0F0E;   /* Text on light backgrounds */

  /* Accent */
  --c-bronze:       #A87835;   /* Muted Bronze — fine rules, step numbers, selected labels */
  --c-bronze-light: #B8904E;   /* Lighter bronze for hover */
  --c-bronze-dim:   rgba(168, 120, 53, 0.25); /* Ghost bronze for large numbers */

  /* Borders */
  --c-border-subtle: rgba(244, 241, 232, 0.08);  /* Very faint — section dividers */
  --c-border-mid:    rgba(244, 241, 232, 0.14);  /* Medium — card borders */
  --c-border-strong: rgba(244, 241, 232, 0.22);  /* Strong — interactive borders */
  --c-border-bronze: rgba(168, 120, 53, 0.35);   /* Bronze rule */
  --c-border-green:  rgba(28, 66, 51, 0.65);     /* Green rule */

  /* --- TYPOGRAPHY --- */

  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body:    'Jost', 'Helvetica Neue', system-ui, sans-serif;

  /* --- TYPE SCALE --- */

  --text-2xs: 0.6875rem;   /* 11px */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.875rem;    /* 14px */
  --text-base:1rem;        /* 16px */
  --text-lg:  1.125rem;    /* 18px */
  --text-xl:  1.25rem;     /* 20px */
  --text-2xl: 1.5rem;      /* 24px */
  --text-3xl: 1.875rem;    /* 30px */
  --text-4xl: 2.25rem;     /* 36px */
  --text-5xl: 3rem;        /* 48px */
  --text-6xl: 3.75rem;     /* 60px */
  --text-7xl: 4.5rem;      /* 72px */
  --text-8xl: 5.5rem;      /* 88px */

  /* Fluid hero headline: clamps between 2.75rem (44px) and 5.5rem (88px) */
  --text-hero: clamp(2.75rem, 6.5vw, 5.5rem);

  /* Fluid section heading: clamps between 2rem (32px) and 3.75rem (60px) */
  --text-section: clamp(2rem, 4.5vw, 3.75rem);

  /* --- LINE HEIGHTS --- */

  --leading-tight:  1.12;
  --leading-snug:   1.25;
  --leading-normal: 1.55;
  --leading-relaxed:1.72;

  /* --- LETTER SPACING --- */

  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-wider:  0.1em;
  --tracking-widest: 0.18em;

  /* --- SPACING SCALE --- */

  --sp-1:  0.25rem;    /* 4px */
  --sp-2:  0.5rem;     /* 8px */
  --sp-3:  0.75rem;    /* 12px */
  --sp-4:  1rem;       /* 16px */
  --sp-5:  1.25rem;    /* 20px */
  --sp-6:  1.5rem;     /* 24px */
  --sp-8:  2rem;       /* 32px */
  --sp-10: 2.5rem;     /* 40px */
  --sp-12: 3rem;       /* 48px */
  --sp-16: 4rem;       /* 64px */
  --sp-20: 5rem;       /* 80px */
  --sp-24: 6rem;       /* 96px */
  --sp-32: 8rem;       /* 128px */

  /* Section vertical padding */
  --section-py:        7.5rem;   /* 120px — desktop */
  --section-py-lg:     9rem;     /* 144px — large/hero sections */
  --section-py-sm:     5rem;     /* 80px — compact sections */
  --section-py-mobile: 4.5rem;   /* 72px — mobile */

  /* --- LAYOUT --- */

  --max-w:        1240px;   /* Primary content max-width */
  --max-w-narrow: 720px;    /* Narrow copy columns */
  --max-w-wide:   1400px;   /* Wide/bleed sections */
  --gutter:       2.5rem;   /* 40px — horizontal page padding */
  --gutter-sm:    1.25rem;  /* 20px — mobile horizontal padding */

  /* --- BORDERS & RADII --- */

  --r-xs:  2px;
  --r-sm:  3px;
  --r:     4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  16px;

  /* --- TRANSITIONS --- */

  --ease:       cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);

  --t-fast:    140ms;
  --t-base:    220ms;
  --t-slow:    380ms;
  --t-slower:  550ms;

  /* --- SHADOWS --- */

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.35);
  --shadow:     0 4px 16px rgba(0,0,0,0.28);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.38);
  --shadow-xl:  0 16px 48px rgba(0,0,0,0.45);

  /* --- HEADER --- */

  --header-h: 76px;   /* Fixed header height */
}

/* --- REDUCED MOTION OVERRIDE --- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-fast:   0ms;
    --t-base:   0ms;
    --t-slow:   0ms;
    --t-slower: 0ms;
  }
}