/* ============================================================
   CHALK & THUNDER — Design Tokens  v2
   kidslearnersclub.com
   Midnight #1C1C2E · Mint #58E6B8 · Gold #FFD166 · Coral #FF6B6B
   Space Grotesk (display) · DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* Palette */
  --midnight:      #1C1C2E;
  --midnight-2:    #252538;
  --midnight-3:    #2E2E45;
  --midnight-4:    #3A3A55;
  --mint:          #58E6B8;
  --mint-dim:      #3DB896;
  --mint-glow:     rgba(88,230,184,0.12);
  --mint-border:   rgba(88,230,184,0.28);
  --gold:          #FFD166;
  --gold-dim:      #E8BA4A;
  --gold-glow:     rgba(255,209,102,0.14);
  --coral:         #FF6B6B;
  --coral-dim:     #E84E4E;
  --coral-glow:    rgba(255,107,107,0.14);
  --white:         #FFFFFF;
  --off-white:     #F8F7FC;

  /* Text — BRIGHTENED across the board */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.88);   /* was 0.65 */
  --text-muted:     rgba(255,255,255,0.55);   /* was 0.38 */

  --border-subtle: rgba(255,255,255,0.10);
  --border-mid:    rgba(255,255,255,0.18);

  /* Typography */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  /* Scale — bumped base size up */
  --text-xs:   0.75rem;     /* 12px  was 11px */
  --text-sm:   0.9375rem;   /* 15px  was 13px */
  --text-base: 1.0625rem;   /* 17px  was 15px */
  --text-md:   1.1875rem;   /* 19px  was 17px */
  --text-lg:   1.375rem;    /* 22px  was 20px */
  --text-xl:   1.625rem;    /* 26px  was 24px */
  --text-2xl:  2.125rem;    /* 34px  was 32px */
  --text-3xl:  2.875rem;    /* 46px  was 44px */
  --text-4xl:  3.875rem;    /* 62px  was 60px */

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill:100px;

  /* Shadows */
  --shadow-mint:  0 0 0 1px var(--mint-border), 0 8px 32px rgba(88,230,184,0.10);
  --shadow-card:  0 1px 0 var(--border-subtle), 0 8px 24px rgba(0,0,0,0.24);
  --shadow-float: 0 16px 48px rgba(0,0,0,0.40);

  /* Layout */
  --max-w: 1140px;
  --nav-h:  100px;
}