/* ═══════════════════════════════════════════════════════════
   CoachClub Modern — Design Tokens
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ── Colors ──────────────────────────────────────────── */
    --ccm-lime:          #B4E717;
    --ccm-lime-dark:     #9ACA0A;
    --ccm-lime-glow:     rgba(180, 231, 23, 0.35);

    --ccm-dark:          #0D0D0D;
    --ccm-dark-soft:     #1A1A1A;
    --ccm-dark-card:     #1E1E1E;
    --ccm-dark-border:   #2A2A2A;

    --ccm-navy:          #1A1A2E;
    --ccm-green-deep:    #10312A;
    --ccm-green-mid:     #1C4B42;

    --ccm-white:         #FFFFFF;
    --ccm-off-white:     #F5F5F5;
    --ccm-cream:         #EDE0D0;
    --ccm-gold:          #E9C864;

    --ccm-text:          #E0E0E0;
    --ccm-text-muted:    #999999;
    --ccm-text-dark:     #1A1A1A;
    --ccm-text-dark-muted:#666666;

    /* ── Typography ──────────────────────────────────────── */
    --font-display:      'Bebas Neue', Impact, sans-serif;
    --font-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --fs-xs:             0.75rem;   /* 12px */
    --fs-sm:             0.875rem;  /* 14px */
    --fs-base:           1rem;      /* 16px */
    --fs-md:             1.125rem;  /* 18px */
    --fs-lg:             1.25rem;   /* 20px */
    --fs-xl:             1.5rem;    /* 24px */
    --fs-2xl:            2rem;      /* 32px */
    --fs-3xl:            2.5rem;    /* 40px */
    --fs-4xl:            3.5rem;    /* 56px */
    --fs-5xl:            4.5rem;    /* 72px */
    --fs-hero:           6rem;      /* 96px */

    --fw-light:          300;
    --fw-regular:        400;
    --fw-medium:         500;
    --fw-semi:           600;
    --fw-bold:           700;
    --fw-extra:          800;

    --lh-tight:          1.1;
    --lh-snug:           1.25;
    --lh-normal:         1.5;
    --lh-relaxed:        1.7;

    /* ── 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-section:     clamp(4rem, 8vw, 8rem);

    /* ── Layout ──────────────────────────────────────────── */
    --container-max:     1280px;
    --container-wide:    1440px;
    --container-narrow:  720px;
    --container-padding: clamp(1rem, 3vw, 2rem);

    /* ── Borders & Radius ────────────────────────────────── */
    --radius-sm:         8px;
    --radius-md:         12px;
    --radius-lg:         16px;
    --radius-xl:         24px;
    --radius-pill:       100px;
    --radius-circle:     50%;

    /* ── Shadows ─────────────────────────────────────────── */
    --shadow-sm:         0 2px 8px rgba(0,0,0,0.08);
    --shadow-md:         0 4px 20px rgba(0,0,0,0.12);
    --shadow-lg:         0 8px 40px rgba(0,0,0,0.2);
    --shadow-glow:       0 0 30px var(--ccm-lime-glow);
    --shadow-gold:       0 0 26px rgba(233,200,100,0.5);

    /* ── Transitions ─────────────────────────────────────── */
    --ease-out:          cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:     150ms;
    --duration-normal:   300ms;
    --duration-slow:     500ms;

    /* ── Glass effect ────────────────────────────────────── */
    --glass-bg:          rgba(255,255,255,0.06);
    --glass-border:      rgba(255,255,255,0.1);
    --glass-blur:        blur(20px);
}