/* Gurukulam Global School — design tokens ("Lotus Bloom", approved 3 Sep 2026; palette v2 from the Sept 2026 emblem, 8 Sep 2026)
   Source of truth: design/DESIGN-SYSTEM.md. Hex values are the reconciled logo palette,
   not the mockup's. Do not add colours here without updating DESIGN-SYSTEM.md. */

:root {
  /* 1. Colour — grounds and lines */
  --ground: #FFF6EC;      /* page background, warm cream */
  --ground-2: #FDEBDD;    /* warm alternate band, peach tint */
  --surface: #FFFFFF;     /* cards, header, forms */
  --line: #F1E6DA;        /* hairlines on cream */
  --line-2: #D8CDBF;      /* borders on cards */

  /* Colour — text */
  --ink: #0A1450;         /* emblem dark navy: headings, nav, primary text on light, 16.0:1 on cream */
  --band: #00388C;        /* emblem royal navy: footer, bands, utility bar, seal band. 10.1:1 with white text */
  --text: #262B4D;        /* body text, navy mixed with cream, 12.5:1 on cream */
  --text-2: #464C6E;      /* secondary text, 7.4:1 */
  --muted: #5F6580;       /* meta, eyebrows, 5.1:1 */

  /* Colour — brand hues (flat; gradients live only inside petals) */
  --orange: #FC6C00;      /* emblem lotus orange: primary button, one accent word, petals, dashes. Never text. 2.9:1 */
  --orange-hover: #DD5E00;
  --orange-text: #A84600; /* the only orange allowed at text size (links), 5.9:1 on white, 5.6:1 on cream */
  --maroon: #7C0408;      /* the G: notices category, error semantic, 11.2:1 */
  --teal: #007C86;        /* the m: utility-bar links, icons, community category, 5.0:1 */
  --teal-rule: #007C86;   /* decorative rules only (was a lighter teal; now the m teal) */
  --sky: #0288E6;         /* the r: sky category, petal gradient. Large text only, 3.7:1 */
  --sky-deep: #004CCC;    /* the second u: links on light, admissions category, 7.2:1 */
  --magenta: #DE0080;     /* the first u: arts category, petal gradient, 4.8:1 */
  --purple: #3C0080;      /* the l: pre-primary category, petal gradient, 14.0:1 */
  --green: #007304;       /* the a: achievements category, 6.1:1 */
  --red: #7C0408;         /* alias of --maroon; red is retired from the palette */
  --gold: #C9962B;        /* 1px hairlines on achievements only */

  /* Colour — category chip tints (ink text on tint) */
  --chip-notices: #F6E6E6;      /* maroon tint */
  --chip-academics: #E6E9F3;    /* navy tint */
  --chip-sports: #E0F0FC;       /* sky tint */
  --chip-arts: #FCE2F0;         /* magenta tint */
  --chip-events: #FFE9D6;       /* orange tint */
  --chip-admissions: #E2EAF9;   /* blue tint */
  --chip-pre-primary: #ECE4F5;  /* purple tint */
  --chip-achievements: #E2F1E2; /* green tint */
  --chip-community: #DFF1F2;    /* teal tint */
  --chip-media: #EFE9F6;        /* purple tint */

  /* Colour — semantic (always paired with a word) */
  --success: #007304;
  --warning: #A84600;
  --error: #7C0408;
  --info: #004CCC;

  /* Colour — on band / on ink (footer, principal card) */
  --on-ink: #FFFFFF;      /* 10.8:1 on band, 17.1:1 on ink */
  --on-ink-2: #D6E0F5;    /* secondary text on band, 8.2:1 */
  --on-ink-3: #B9DDE3;    /* eyebrows on band, 7.9:1 */
  --on-ink-link: #FFC58A; /* links on band, 7.0:1 */

  /* 2. Petal gradients (stops; the <linearGradient> defs are in partials/petals.php) */
  --petal-orange-0: #FC6C00; --petal-orange-1: #FFA352;
  --petal-magenta-0: #DE0080; --petal-magenta-1: #F26AB0;
  --petal-sky-0: #0288E6; --petal-sky-1: #7CC4F2;
  --petal-teal-0: #007C86; --petal-teal-1: #6FC3CC;
  --petal-purple-0: #3C0080; --petal-purple-1: #8E5AC0;

  /* 3. Typography */
  --font-display: 'Lora', 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-text: 'Outfit', 'Segoe UI', Helvetica, Arial, sans-serif;

  --h1: clamp(2.5rem, 1.6rem + 3.2vw, 4rem);      /* 40 mobile → 64 desktop */
  --h1-lh: 1.05;
  --h2: clamp(2rem, 1.45rem + 1.9vw, 2.75rem);    /* 32 → 44 */
  --h2-lh: 1.1;
  --h3: 1.5rem;                                    /* 24 */
  --h3-lh: 1.25;
  --h4: 1.3125rem;                                 /* 21, Outfit 600 */
  --quote: 1.75rem;                                /* 28, Lora italic */
  --body: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem);/* 17 mobile → 18 desktop */
  --body-lh: 1.6;
  --body-s: 1rem;                                  /* 16 */
  --nav: 1rem;                                     /* 16 / 500 */
  --eyebrow: 0.8125rem;                            /* 13 / 600 / 0.14em uppercase */
  --meta: 0.875rem;                                /* 14 / 400 */
  --small: 0.75rem;                                /* 12 */

  /* 4. Shape */
  --r-card: 28px;
  --r-card-lg: 40px;
  --r-btn: 999px;
  --r-input: 14px;
  --r-chip: 999px;
  --r-img: 28px;
  --r-tile: 22px;
  --r-hero: 48px 200px 48px 200px;                 /* asymmetric hero photo frame */

  /* Depth */
  --shadow-card: 0 1px 2px rgba(10,20,80,0.04), 0 18px 48px rgba(10,20,80,0.06);
  --shadow-btn: 0 10px 28px rgba(252,108,0,0.28);
  --shadow-photo: 0 30px 70px rgba(10,20,80,0.16);
  --shadow-float: 0 10px 30px rgba(10,20,80,0.14);
  --shadow-header: 0 1px 0 var(--line), 0 8px 24px rgba(10,20,80,0.06);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--surface), 0 0 0 6px var(--teal);

  /* 5. Spacing scale */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;  --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px;  --s-9: 96px;  --s-10: 128px;

  /* Layout */
  --container: 1248px;                             /* content max width */
  --gutter: 24px;                                  /* 12-column grid gutter */
  --pad-x: clamp(20px, 2vw + 8px, 96px);           /* side padding 20 mobile → 96 desktop */
  --section-y: clamp(64px, 4vw + 32px, 112px);     /* section padding 64 → 112 */

  /* Fixed bars */
  --utility-h: 44px;
  --header-h: 88px;
  --header-h-scrolled: 64px;
  --mobile-bar-h: 64px;

  /* Motion */
  --ease-bloom: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-bloom: 900ms;
  --dur-fast: 200ms;
  --dur-base: 320ms;

  /* Breakpoints (for reference only; CSS custom properties cannot be used in media queries)
     --bp-xs: 480px   --bp-sm: 768px   --bp-md: 1024px   --bp-lg: 1280px
     360px is the smallest checked viewport. */
}