/* ============================================================
   Croxteth Martial Arts — Colors & Type
   Drop-in CSS custom properties matching the real brand
   (red + royal blue on black, from logo + flyers).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ── Surfaces ───────────────────────────────────────── */
  --bg:           #0d0d0d;   /* Page background — near-black from flyers */
  --surface:      #161616;   /* Alternate section background */
  --card:         #1e1e1e;   /* Card / panel backgrounds */
  --border:       #2a2a2a;   /* Dividers, card borders */

  /* ── Primary Accent — Red (from logo + flyers) ──────── */
  --red:          #cc1c1c;   /* Primary — buttons, stats bar, contact strip */
  --red-dark:     #a01515;   /* Button hover state */
  --red-bright:   #e84040;   /* Highlights, labels, links, glows */

  /* ── Secondary Accent — Royal Blue (logo base, CTA bars) */
  --blue:         #1e3dbb;   /* Secondary — "Classes for all ages" bar, "Learn more" */
  --blue-dark:    #152a8a;   /* Hover / depth */
  --blue-bright:  #3858e6;   /* Sparks, highlights */

  /* ── Text ───────────────────────────────────────────── */
  --white:        #ffffff;   /* Primary text, headlines */
  --muted:        #999999;   /* Body/supporting text */
  --muted-light:  #cccccc;   /* Slightly prominent secondary text */

  /* ── Layout ─────────────────────────────────────────── */
  --nav-h:        70px;
  --container:    1200px;
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  999px;

  /* ── RGBA helpers (tint backgrounds, borders) ───────── */
  --red-a-10:     rgba(204, 28, 28, 0.10);
  --red-a-15:     rgba(204, 28, 28, 0.15);
  --red-a-25:     rgba(204, 28, 28, 0.25);
  --red-bright-a-30: rgba(232, 64, 64, 0.30);
  --blue-a-15:    rgba(30, 61, 187, 0.15);
  --blue-a-25:    rgba(30, 61, 187, 0.25);

  /* ── Type — font families ───────────────────────────── */
  --font-display: 'Bebas Neue', 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* ── Type — fluid scale ─────────────────────────────── */
  --h1:           clamp(52px, 7vw, 96px);
  --h2:           clamp(38px, 5vw, 62px);
  --h3:           clamp(22px, 2.4vw, 28px);
  --body-lg:      clamp(15px, 1.5vw, 17px);
  --body:         16px;
  --body-sm:      14px;
  --caption:      12px;
  --micro:        10px;

  /* ── Spacing ────────────────────────────────────────── */
  --space-xs:     4px;
  --space-sm:     8px;
  --space-md:     16px;
  --space-lg:     24px;
  --space-xl:     40px;
  --space-2xl:    64px;
  --section-pad:  clamp(60px, 8vw, 110px);

  /* ── Shadows ────────────────────────────────────────── */
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.25);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.4);
  --shadow-glow-red:  0 0 40px rgba(204,28,28,0.35);
  --shadow-glow-blue: 0 0 40px rgba(30,61,187,0.3);
}

/* ============================================================
   SEMANTIC TYPE — apply directly or mix via @extend
   ============================================================ */

.ds-h1, h1.ds {
  font-family: var(--font-display);
  font-size: var(--h1);
  line-height: 1;
  letter-spacing: 2px;
  color: var(--white);
  font-weight: 400; /* Bebas ships at one weight; 400 is "correct" */
}

.ds-h2, h2.ds {
  font-family: var(--font-display);
  font-size: var(--h2);
  line-height: 1.05;
  letter-spacing: 1px;
  color: var(--white);
}

.ds-h3, h3.ds {
  font-family: var(--font-display);
  font-size: var(--h3);
  letter-spacing: 1px;
  color: var(--white);
}

.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--caption);
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red-bright);
}

.ds-body {
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: 1.7;
  color: var(--muted-light);
}

.ds-muted {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  line-height: 1.65;
  color: var(--muted);
}

.ds-cta-text {
  font-family: var(--font-body);
  font-size: var(--body-sm);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}