/* ==========================================================================
   VARIABLES — Design Tokens
   Indra International School
   Colors sampled directly from the school crest logo. Do not hardcode raw
   hex values in component files — reference these tokens instead so the
   palette stays a single source of truth across all 8 pages.
   ========================================================================== */

:root {

  /* ---- Brand: Navy ---- */
  --color-ink-navy:      #0C2B42;  /* primary — headings, nav text, buttons */
  --color-depth-navy:    #081C2C;  /* darkest — footer bg, scrolled nav bg fallback, overlays */
  --color-navy-mid:      #163C58;  /* hover/active state for navy surfaces */

  /* ---- Brand: Gold ---- */
  --color-heritage-gold: #F5A700;  /* sampled from the ribbon — fills, icons, laurel motif, dividers. Backgrounds/icons only, never body text. */
  --color-ink-gold:      #8C5A00;  /* WCAG AA-safe (5.9:1 on white) — small text, links, labels on light backgrounds */

  /* ---- Neutrals ---- */
  --color-white:         #FFFFFF;
  --color-mist:          #F4F6F8;  /* alternating light section backgrounds */
  --color-slate:         #5B6B7A;  /* secondary / muted text */
  --color-charcoal:      #1F2933;  /* body copy — softer than pure black */
  --color-hairline:      #E1E6EA; /* borders, dividers, table lines */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-ui:      'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --fs-h1:      clamp(2.25rem, 1.55rem + 3vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.7;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 2px 10px rgba(12, 43, 66, 0.07);
  --shadow-md: 0 14px 34px rgba(12, 43, 66, 0.12);
  --shadow-lg: 0 26px 64px rgba(12, 43, 66, 0.18);

  /* ---- Motion ---- */
  --ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 84px;

  /* ---- Decorative motif (laurel sprig, used via mask-image + background-color
       so one shape can be recolored per context without extra image requests) ---- */
  --laurel-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Cpath d='M4 30 C20 30 30 20 34 6' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='10' cy='27' rx='6.4' ry='2.7' transform='rotate(-25 10 27)'/%3E%3Cellipse cx='20' cy='21' rx='6.4' ry='2.7' transform='rotate(-38 20 21)'/%3E%3Cellipse cx='28' cy='13' rx='6' ry='2.5' transform='rotate(-52 28 13)'/%3E%3Cellipse cx='33' cy='5' rx='5.4' ry='2.3' transform='rotate(-66 33 5)'/%3E%3C/g%3E%3C/svg%3E");
}






/* ==========================================================================
   VARIABLES — Design Tokens
   Indra International School
   Colors sampled directly from the school crest logo. Do not hardcode raw
   hex values in component files — reference these tokens instead so the
   palette stays a single source of truth across all 8 pages.
   ========================================================================== */

:root {

  /* ---- Brand: Navy ---- */
  --color-ink-navy:      #0C2B42;  /* primary — headings, nav text, buttons */
  --color-depth-navy:    #081C2C;  /* darkest — footer bg, scrolled nav bg fallback, overlays */
  --color-navy-mid:      #163C58;  /* hover/active state for navy surfaces */

  /* ---- Brand: Gold ---- */
  --color-heritage-gold: #F5A700;  /* sampled from the ribbon — fills, icons, laurel motif, dividers. Backgrounds/icons only, never body text. */
  --color-ink-gold:      #8C5A00;  /* WCAG AA-safe (5.9:1 on white) — small text, links, labels on light backgrounds */

  /* ---- Neutrals ---- */
  --color-white:         #FFFFFF;
  --color-mist:          #F4F6F8;  /* alternating light section backgrounds */
  --color-slate:         #5B6B7A;  /* secondary / muted text */
  --color-charcoal:      #1F2933;  /* body copy — softer than pure black */
  --color-hairline:      #E1E6EA; /* borders, dividers, table lines */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', 'Georgia', serif;
  --font-ui:      'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  --fs-h1:      clamp(2.25rem, 1.55rem + 3vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    1.0625rem;
  --fs-small:   0.9375rem;
  --fs-caption: 0.8125rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.7;

  /* ---- Spacing scale ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;

  /* ---- Radius ---- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  /* Status colors — form feedback only, kept minimal and separate
     from the brand palette on purpose. */
  --color-success: #2E7D4F;
  --color-error: #C0392B;
  --color-gold-glow: rgba(245, 167, 0, 0.18);

  --shadow-sm: 0 2px 10px rgba(12, 43, 66, 0.07);
  --shadow-md: 0 14px 34px rgba(12, 43, 66, 0.12);
  --shadow-lg: 0 26px 64px rgba(12, 43, 66, 0.18);

  /* ---- Motion ---- */
  --ease-premium:  cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 320ms;
  --duration-slow: 560ms;

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-height: 84px;

  /* ---- Decorative motif (laurel sprig, used via mask-image + background-color
       so one shape can be recolored per context without extra image requests) ---- */
  --laurel-sprig: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 36'%3E%3Cpath d='M4 30 C20 30 30 20 34 6' stroke='%23000' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cg fill='%23000'%3E%3Cellipse cx='10' cy='27' rx='6.4' ry='2.7' transform='rotate(-25 10 27)'/%3E%3Cellipse cx='20' cy='21' rx='6.4' ry='2.7' transform='rotate(-38 20 21)'/%3E%3Cellipse cx='28' cy='13' rx='6' ry='2.5' transform='rotate(-52 28 13)'/%3E%3Cellipse cx='33' cy='5' rx='5.4' ry='2.3' transform='rotate(-66 33 5)'/%3E%3C/g%3E%3C/svg%3E");
}