/* =====================================================================
   GOLDEN SWORD TAEKWONDO — Core Design Tokens
   Black & Gold. Arabic-first (RTL), Latin secondary.
   Fonts: Changa (display) + Cairo (body) — Google Fonts.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Changa:wght@500;600;700;800&family=Cairo:wght@400;500;600;700;900&display=swap');

:root {
  /* ---- FONT FAMILIES ---------------------------------------------- */
  --font-display: 'Changa', 'Cairo', system-ui, sans-serif;  /* headings, hero, numbers */
  --font-body:    'Cairo', system-ui, sans-serif;            /* paragraphs, UI, body */

  /* ---- BRAND COLOR: GOLD ------------------------------------------ */
  --gold:         #E4A92B;   /* PRIMARY brand gold (from logo) */
  --gold-bright:  #F4BD3F;   /* highlight / hover up */
  --gold-deep:    #C68A1E;   /* pressed / darker accents */
  --gold-soft:    #F6E2A6;   /* tints, subtle fills on dark */
  --gold-wash:    #FBF3DC;   /* faint gold wash on light surfaces */

  /* ---- INK: BLACK SYSTEM ------------------------------------------ */
  --ink:          #0D0D0F;   /* brand black — primary dark surface */
  --ink-900:      #141417;   /* raised dark surface / cards on black */
  --ink-800:      #1E1E22;   /* hairline-bordered panels on black */
  --ink-700:      #2C2C31;   /* borders / dividers on dark */
  --ink-600:      #3D3D44;   /* disabled on dark */

  /* ---- NEUTRALS (light surfaces) ---------------------------------- */
  --white:        #FFFFFF;
  --paper:        #FAFAF8;   /* off-white page bg */
  --paper-2:      #F1F1ED;   /* light alt section */
  --line:         #E4E4DF;   /* light borders */
  --line-strong:  #CFCFC8;

  /* ---- TEXT ------------------------------------------------------- */
  --fg-on-dark:        #FFFFFF;   /* primary text on black */
  --fg-on-dark-2:      #B9B9C0;   /* secondary text on black */
  --fg-on-dark-3:      #76767E;   /* muted / captions on black */
  --fg:                #15151A;   /* primary text on light */
  --fg-2:              #54545C;   /* secondary text on light */
  --fg-3:              #87878E;   /* muted / captions on light */

  /* ---- SEMANTIC --------------------------------------------------- */
  --success:      #2FA866;
  --warning:      #E4A92B;   /* reuses gold */
  --danger:       #D6453B;
  --info:         #3B82C4;

  /* ---- RADII ------------------------------------------------------ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ---- SPACING SCALE (4px base) ----------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* ---- SHADOWS ---------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(13,13,15,.08), 0 1px 1px rgba(13,13,15,.04);
  --shadow-md:  0 6px 20px rgba(13,13,15,.12);
  --shadow-lg:  0 18px 50px rgba(13,13,15,.22);
  --shadow-gold: 0 10px 30px rgba(228,169,43,.35);   /* glow under gold CTAs */

  /* ---- MOTION ----------------------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1); /* @kind other */ /* confident ease-out */
  --ease-snap: cubic-bezier(.2,.8,.2,1); /* @kind other */
  --dur-fast: .14s; /* @kind other */
  --dur: .26s; /* @kind other */
  --dur-slow: .5s; /* @kind other */
}

/* =====================================================================
   SEMANTIC TYPE SCALE
   Apply with class .gs-display / .gs-h1 ... or copy the rules.
   Arabic renders heavier & slightly larger line-height; tuned for Cairo.
   ===================================================================== */

.gs-display {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.02;
  letter-spacing: -0.01em;
}
.gs-h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.005em;
}
.gs-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.15;
}
.gs-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
}
.gs-lead {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.6;
}
.gs-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.75;          /* generous — Arabic reads better airy */
}
.gs-small {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.6;
}
.gs-eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;   /* Latin only — Arabic ignores casing */
}
.gs-stat {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* RTL helper — the site is Arabic-first */
[dir="rtl"] { text-align: right; }