/* =====================================================================
   DESIGN TOKENS — The S.D. Vidya School, Noida
   Per SD Vidya Brand Book: Maroon (#8D2130) dominant · Green (#085B4A) accent
   · Sand White / Beige backgrounds · Grey body text (#2B2B2B).
   Fonts: Poppins (primary/body) + Playfair Display (formal headings).
   Colour balance 60% neutral / 30% maroon / 10% green — never co-dominant.
   No gradients per brand book (gradient tokens flattened to solids).
   Edit this file only to re-theme the whole site.
   ===================================================================== */

:root {
  /* ---- Brand PRIMARY: Maroon #8D2130 (dominant) ---- */
  --maroon-900: #5F141C;
  --maroon-800: #741A26;
  --maroon:     #8D2130;   /* PRIMARY — brand book */
  --maroon-600: #A63A46;
  --maroon-400: #C87984;
  --maroon-100: #F3E1E3;

  /* ---- Brand ACCENT: Green #085B4A (highlights/accents only — never equal to maroon) ---- */
  --green-900:  #063E33;
  --green-800:  #074A3D;
  --green:      #085B4A;   /* ACCENT — brand book */
  --green-600:  #0C6E5A;
  --green-400:  #4E9384;
  --green-100:  #D9EDE5;   /* Herbal Mist — brand book */

  /* ---- Legacy "gold" tokens remapped to brand accents (gold is NOT in the palette) ---- */
  --gold:       #085B4A;   /* → green accent */
  --gold-300:   #D9EDE5;   /* → herbal mist (light accent on dark) */
  --gold-100:   #F1E7D0;   /* → beige (soft tint) */
  --gold-600:   #085B4A;

  /* ---- Neutrals: Sand White / Beige backgrounds, Grey body ---- */
  --cream:      #FBF7EF;   /* Sand White — page background (brand book) */
  --cream-2:    #FBF7EF;
  --cream-3:    #F1E7D0;   /* Beige (brand book) */
  --charcoal:   #1A1A1A;
  --ink-700:    #2B2B2B;   /* Grey Body — brand book body text */
  --ink-500:    #5A5A57;
  --ink-300:    #9A988F;
  --line:       #E7E0D0;   /* warm hairline */
  --line-2:     #ECE5D5;
  --white:      #FFFFFF;
  --blue-tint:  #E8EEF7;   /* Soft Blue Tint — brand book */

  /* ---- Semantic ---- */
  --bg:           var(--cream);
  --bg-alt:       var(--white);
  --bg-tint:      var(--cream-3);
  --bg-deep:      var(--green);
  --text:         var(--ink-700);
  --text-soft:    var(--ink-500);
  --heading:      var(--charcoal);   /* near-black — lets maroon stay the accent that pops */
  --primary:      var(--maroon);
  --primary-dark: var(--maroon-800);
  --accent:       var(--green);

  /* ---- Typography — SD Vidya Brand Book pairing ----
     Poppins = primary (body, UI, most headings). Playfair Display = formal headings.
     Max two families per layout (brand rule). ---- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-serif:   "Playfair Display", Georgia, serif;
  --font-sans:    "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Fluid type scale — tighter, denser, less giant */
  --fs-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --fs-sm:   clamp(0.82rem, 0.8rem + 0.12vw, 0.9rem);
  --fs-base: clamp(0.92rem, 0.9rem + 0.12vw, 1rem);
  --fs-md:   clamp(1.02rem, 0.97rem + 0.3vw, 1.18rem);
  --fs-lg:   clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  --fs-xl:   clamp(1.55rem, 1.25rem + 1.3vw, 2.3rem);
  --fs-2xl:  clamp(1.9rem, 1.45rem + 2vw, 3rem);
  --fs-3xl:  clamp(2.3rem, 1.6rem + 3.2vw, 3.9rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-base:  1.5;   /* brand book: body line spacing 1.3–1.5 */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;
  --tracking-tight: -0.01em;
  --tracking-wide:  0.16em;

  /* ---- Spacing — compact ---- */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.6rem; --sp-7: 2.2rem;  --sp-8: 3rem;
  --sp-9: 4rem;    --sp-10: 5.5rem;
  --section-y: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem);

  /* ---- Layout ---- */
  --container: 1200px;
  --container-narrow: 860px;
  --gutter: clamp(1rem, 0.5rem + 2.4vw, 2rem);

  /* ---- Radius (rounded images, soft cards) ---- */
  /*--r-sm: 8px;  --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;*/

  /* ---- Shadows (soft) ---- */
  --sh-sm:  0 1px 2px rgba(26,26,26,.05), 0 3px 8px rgba(26,26,26,.05);
  --sh-md:  0 8px 24px rgba(26,26,26,.08), 0 2px 6px rgba(26,26,26,.05);
  --sh-lg:  0 22px 50px rgba(20,50,38,.12), 0 8px 18px rgba(20,50,38,.07);
  --sh-xl:  0 36px 80px rgba(20,50,38,.18), 0 12px 28px rgba(20,50,38,.1);
  --sh-maroon: 0 16px 34px rgba(139,30,45,.28);

  /* ---- "Gradients" flattened to solid brand fills (brand book: no gradients) ---- */
  --grad-maroon: var(--maroon);
  --grad-green:  var(--green);
  --grad-gold:   var(--cream-3);   /* → beige solid (was gold gradient) */

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 0.2s; --dur-base: 0.35s; --dur-slow: 0.7s;

  /* ---- Header ---- */
  --topbar-h: 38px;
  --nav-h: 74px;
  --nav-h-shrink: 60px;
  --z-header: 1000; --z-drawer: 1100; --z-modal: 1200; --z-float: 900;
}

/* Wider container + slightly larger type on big screens */
@media (min-width: 1600px) {
  :root { --container: 1440px; }
}
@media (min-width: 2000px) {
  :root {
    --container: 1760px;
    --fs-base: 1.08rem;
    --section-y: clamp(4rem, 3vw, 6rem);
  }
}
@media (min-width: 2560px) {
  :root { --container: 2040px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: .001s; --dur-base: .001s; --dur-slow: .001s; }
}