/* ============================================================
   LIONS MMA CLUB — DESIGN TOKENS
   Brand: Cage Black / Fight Red / Lion Silver / Clean White
   ============================================================ */

:root {
  /* ── Colors ───────────────────────────────────────────── */
  --color-cage-black:  #0D0D0D;
  --color-fight-red:   #CC1717;
  --color-lion-silver: #C0C0C0;
  --color-white:       #FFFFFF;

  /* Derived surfaces */
  --color-surface:     #161616;   /* nav, cards, elevated panels */
  --color-surface-2:   #1E1E1E;   /* table row alt, input bg */
  --color-border:      #2A2A2A;   /* subtle divider */
  --color-red-dim:     #7A0F0F;   /* muted red for hover bg */

  /* Overlays */
  --color-overlay:     rgba(13, 13, 13, 0.72);
  --color-overlay-hvy: rgba(13, 13, 13, 0.88);

  /* ── Typography ───────────────────────────────────────── */
  --font-display:  'Bebas Neue', 'Barlow Condensed', sans-serif;
  --font-heading:  'Barlow Condensed', sans-serif;
  --font-body:     'Montserrat', sans-serif;

  /* Sizes — fluid */
  --text-hero:   clamp(2.5rem, 6vw, 5rem);
  --text-h1:     clamp(2.5rem, 7vw, 6rem);
  --text-h2:     clamp(1.75rem, 4vw, 3rem);
  --text-h3:     clamp(1.25rem, 2.5vw, 1.75rem);
  --text-body:   1rem;
  --text-sm:     0.875rem;
  --text-xs:     0.75rem;
  --text-label:  0.7rem;

  /* Letter spacing */
  --tracking-tight:    0.005em;   /* Bebas Neue large headings (slight positive tracking reads premium) */
  --tracking-base:     0em;       /* Default / neutral */
  --tracking-wide:     0.12em;    /* Barlow Condensed ALL CAPS labels */
  --tracking-xwide:    0.2em;     /* Micro labels / tags */

  /* Line height */
  --leading-hero:  0.95;
  --leading-head:  1.05;
  --leading-body:  1.7;

  /* Font weights */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ── Spacing scale ────────────────────────────────────── */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.5rem;    /*  8px */
  --space-sm:   1rem;      /* 16px */
  --space-md:   2rem;      /* 32px */
  --space-lg:   4rem;      /* 64px */
  --space-xl:   6rem;      /* 96px */
  --space-2xl:  10rem;     /* 160px */
  --space-3xl:  14rem;     /* 224px */

  /* ── Layout ───────────────────────────────────────────── */
  --max-width:       1280px;
  --nav-height:      72px;
  --section-pad-v:   4.5rem;
  --section-pad-h:   clamp(1.5rem, 5vw, 5rem);

  /* ── Border radius ────────────────────────────────────── */
  --radius-none:   0;
  --radius-badge:  50%;   /* circular badge only */

  /* ── Shadows (Fight Red tinted at low opacity) ────────── */
  --shadow-sm:  0 2px 8px rgba(204, 23, 23, 0.08);
  --shadow-md:  0 4px 24px rgba(204, 23, 23, 0.12), 0 1px 4px rgba(0,0,0,0.6);
  --shadow-lg:  0 8px 48px rgba(204, 23, 23, 0.18), 0 2px 8px rgba(0,0,0,0.8);
  --shadow-glow: 0 0 32px rgba(204, 23, 23, 0.35);

  /* ── Easing ───────────────────────────────────────────── */
  --ease-power:  cubic-bezier(0.16, 1, 0.3, 1);   /* spring — default */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);

  /* ── Durations ────────────────────────────────────────── */
  --dur-fast:   200ms;
  --dur-base:   350ms;
  --dur-slow:   600ms;
}