/* assets/css/variables.css - Master Design System Tokens */
:root {
  /* 1. Structural Anchors (Brand Foundation) */
  --color-royal-blue: #312A7A;
  --color-royal-blue-hover: #26205F;
  --color-brand-red: #E3000F;
  --color-brand-red-hover: #C2000D;
  --color-soft-warm: #FFF9F9;
  --color-warm-white: #FFFDF9;

  /* 2. The "LITTLE" Logo Accents */
  --color-playful-purple: #9B59B6;   /* Creative Arts & Senior KG */
  --color-energetic-orange: #F39C12; /* High-Energy Play & Playgroup */
  --color-growth-green: #2ECC71;     /* Safety & Nursery */
  --color-curious-sky-blue: #3498DB; /* Cognitive Learning & Junior KG */

  /* 3. Dual-Coding Program Color Bindings */
  --program-playgroup: var(--color-energetic-orange);
  --program-nursery: var(--color-growth-green);
  --program-junior-kg: var(--color-curious-sky-blue);
  --program-senior-kg: var(--color-playful-purple);
  --program-daycare: var(--color-brand-red);

  /* Neutrals & Surfaces */
  --color-text-main: #2D3748;
  --color-text-muted: #718096;
  --color-border: #E2E8F0;
  --color-bg-surface: #FFFFFF;

  /* Typography */
  --font-heading: 'Fredoka', 'Baloo 2', cursive, sans-serif;
  --font-body: 'Nunito', 'Poppins', sans-serif;
  --font-regional: 'Noto Sans Gujarati', 'Baloo 2', sans-serif;

  /* Sizing & Elevation */
  --site-max-width: 1400px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 9999px;

  --shadow-card: 0 10px 30px rgba(49, 42, 122, 0.08);
  --shadow-card-hover: 0 20px 40px rgba(49, 42, 122, 0.12);
  --shadow-button: 0 10px 20px rgba(227, 0, 15, 0.28);
  --shadow-floating: 0 16px 36px rgba(0, 0, 0, 0.12);
}