/* Design tokens. Change these first when restyling.
 *
 * Direction: the school's brand navy (#232B74) with the yellow of the sun in the lotus logo as the
 * accent, in the layout of the reference designs (large rounded cards, photo-led sections, a geometric
 * sans with italic serif accent words). The lotus-leaf teal and the water blue of the logo are the
 * supporting colours.
 * Rules (see CLAUDE.md): no purple or indigo gradients, no neon glows, no hard borders between sections.
 */

:root {
  /* Brand */
  --navy-950: #141a4d;
  --navy-900: #232b74;
  --navy-800: #2f3990;
  --navy-700: #3d48a8;
  --logo-teal: #1d7964;
  --logo-blue: #0a84e8;
  --logo-navy: #070044;
  --sun: #ffd43b;
  --sun-600: #f2b705;
  --sun-soft: #fff3c4;

  /* School houses */
  --house-beas: #2563c9;
  --house-ganga: #1f9254;
  --house-ravi: #d23b33;
  --house-yamuna: #f2b705;

  /* Pastels used for dashboard icon tiles and status pills */
  --peach: #fde4d6;
  --peach-ink: #c4562a;
  --sky: #dcecf8;
  --sky-ink: #2a6f9f;
  --lilac: #e7e4f8;
  --lilac-ink: #5b4fc0;
  --mint: #d9f1e6;
  --mint-ink: #1d7964;

  /* Type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --font-scale: 1;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.75rem, 1.35rem + 1.5vw, 2.6rem);
  --text-3xl: clamp(2.2rem, 1.6rem + 2.6vw, 3.6rem);
  --text-hero: clamp(2.6rem, 1.6rem + 4.4vw, 5.2rem);

  --leading-tight: 1.06;
  --leading-snug: 1.3;
  --leading-body: 1.6;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --section-y: clamp(3.5rem, 2.4rem + 5vw, 7rem);
  --gutter: 16px;
  --frame: 12px;          /* inset of the big rounded hero and banners from the window edge */
  --container: 1240px;
  --nav-h: 76px;

  /* Shape */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --radius-pill: 999px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 760ms;

  /* Layers */
  --z-header: 50;
  --z-chat: 80;
  --z-popover: 90;
  --z-toast: 100;
}

@media (min-width: 640px) { :root { --gutter: 24px; --frame: 14px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; --frame: 16px; } }

/* ---------- Light theme (default) ---------- */
:root,
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #f4f5fa;
  --surface: #ffffff;
  --surface-2: #eceef6;
  --surface-3: #dfe2ef;
  --ink: #141a4d;
  --text: #1c2150;
  --muted: #5c6283;
  --line: rgba(20, 26, 77, 0.09);
  --line-strong: rgba(20, 26, 77, 0.2);

  --primary: var(--navy-900);
  --primary-hover: var(--navy-800);
  --on-primary: #ffffff;
  --accent: var(--sun);
  --on-accent: var(--navy-950);
  --accent-ink: #8a6400;
  --accent-soft: var(--sun-soft);
  --good: #1f7a4a;
  --good-soft: #dcf2e4;
  --warn: #a35a00;
  --warn-soft: #fcebd3;
  --bad: #b3261e;
  --bad-soft: #fbe3e0;
  --focus: var(--navy-700);

  --band-bg: var(--navy-900);
  --band-bg-2: var(--navy-800);
  --band-text: #f3f4fb;
  --band-muted: #b9bee0;

  --scroll-thumb: rgba(35, 43, 116, 0.32);
  --scroll-thumb-hover: rgba(35, 43, 116, 0.55);

  --shadow-sm: 0 1px 2px rgba(20, 26, 77, 0.06);
  --shadow: 0 10px 30px -14px rgba(20, 26, 77, 0.28);
  --shadow-lg: 0 30px 60px -24px rgba(20, 26, 77, 0.38);

  --chart-1: #232b74;
  --chart-2: #f2b705;
  --chart-3: #1d7964;
  --chart-4: #c4562a;
  --chart-5: #9aa0bd;
  --chart-6: #0a84e8;
}

/* ---------- Dark theme ---------- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0a0d24;
  --surface: #131838;
  --surface-2: #0e122d;
  --surface-3: #1d2350;
  --ink: #eef0fb;
  --text: #dfe2f3;
  --muted: #9ca2c6;
  --line: rgba(223, 226, 243, 0.09);
  --line-strong: rgba(223, 226, 243, 0.2);

  --primary: var(--sun);
  --primary-hover: #ffe07a;
  --on-primary: var(--navy-950);
  --accent-ink: var(--sun);
  --accent-soft: rgba(255, 212, 59, 0.13);
  --good: #6fd69b;
  --good-soft: rgba(111, 214, 155, 0.14);
  --warn: #f0b85a;
  --warn-soft: rgba(240, 184, 90, 0.14);
  --bad: #ff8a80;
  --bad-soft: rgba(255, 138, 128, 0.14);
  --focus: var(--sun);

  --scroll-thumb: rgba(223, 226, 243, 0.22);
  --scroll-thumb-hover: rgba(223, 226, 243, 0.4);

  --peach: rgba(253, 160, 120, 0.16);
  --peach-ink: #ffb595;
  --sky: rgba(120, 180, 230, 0.16);
  --sky-ink: #9cccf2;
  --lilac: rgba(170, 160, 240, 0.16);
  --lilac-ink: #c4bcff;
  --mint: rgba(80, 200, 160, 0.16);
  --mint-ink: #7fdcbf;

  --band-bg: #10153c;
  --band-bg-2: #192058;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 30px 60px -24px rgba(0, 0, 0, 0.8);

  --chart-1: #dfe2f3;
  --chart-2: #ffd43b;
  --chart-3: #6fd6b5;
  --chart-4: #ffb595;
  --chart-5: #6b7196;
  --chart-6: #7cc0f5;
}

/* ---------- High contrast (accessibility menu) ---------- */
:root[data-contrast='high'] {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --surface-3: #f0f0f0;
  --ink: #000000;
  --text: #000000;
  --muted: #1f1f1f;
  --line: #000000;
  --line-strong: #000000;
  --primary: #0b1040;
  --primary-hover: #000000;
  --on-primary: #ffffff;
  --accent-ink: #000000;
  --focus: #c00000;
  --band-bg: #000000;
  --band-text: #ffffff;
  --band-muted: #ffffff;
}
:root[data-theme='dark'][data-contrast='high'] {
  --bg: #000000;
  --surface: #000000;
  --surface-2: #000000;
  --surface-3: #1a1a1a;
  --ink: #ffffff;
  --text: #ffffff;
  --muted: #f0f0f0;
  --line: #ffffff;
  --line-strong: #ffffff;
  --primary: #ffe066;
  --on-primary: #000000;
  --accent-ink: #ffe066;
  --focus: #ffe066;
}

/* Hindi and Punjabi get matching script fonts first. */
:root:lang(hi) {
  --font-display: 'Noto Sans Devanagari', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Noto Sans Devanagari', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Noto Sans Devanagari', 'Instrument Serif', Georgia, serif;
}
:root:lang(pa) {
  --font-display: 'Noto Sans Gurmukhi', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Noto Sans Gurmukhi', 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-serif: 'Noto Sans Gurmukhi', 'Instrument Serif', Georgia, serif;
}