/* ────────────────────────────────────────────────────────────────
   School360 NG — design tokens
   Mirrored verbatim from the real product (app/index.html).
   Do NOT edit values here to "improve" them — if the app's palette
   changes, update it there first, then bring the change here.
   Marketing-site-only additions live in site.css, clearly separated.
   ──────────────────────────────────────────────────────────────── */

:root {
  --navy: #0B1F4B;
  --amber: #F5A623;
  --amber-dk: #C4820F;
  --amber-lt: #FEF3D0;
  --white: #ffffff;
  --off: #F7F9FC;
  --border: #E2E8F0;
  --slate: #64748B;
  --muted: #94A3B8;
  --body: #334155;
  --mint: #1A7A52;
  --mint-lt: #D1FAE5;
  --red: #DC2626;
  --red-lt: #FEE2E2;
  --amber-bg: rgba(245, 166, 35, .1);
  --shadow: 0 2px 12px rgba(11, 31, 75, .08);
  --shadow-lg: 0 8px 32px rgba(11, 31, 75, .14);
}

@media (prefers-color-scheme: dark) {
  :root {
    --white: #1E293B;
    --off: #0F172A;
    --border: #334155;
    --body: #CBD5E1;
    --slate: #94A3B8;
    --muted: #64748B;
    --mint-lt: rgba(26, 122, 82, .25);
    --red-lt: rgba(220, 38, 38, .2);
    --amber-bg: rgba(245, 166, 35, .15);
    --amber-lt: rgba(245, 166, 35, .15);
    --shadow: 0 2px 12px rgba(0, 0, 0, .3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, .45);
  }
}
:root[data-theme="dark"] {
  --white: #1E293B;
  --off: #0F172A;
  --border: #334155;
  --body: #CBD5E1;
  --slate: #94A3B8;
  --muted: #64748B;
  --mint-lt: rgba(26, 122, 82, .25);
  --red-lt: rgba(220, 38, 38, .2);
  --amber-bg: rgba(245, 166, 35, .15);
  --amber-lt: rgba(245, 166, 35, .15);
  --shadow: 0 2px 12px rgba(0, 0, 0, .3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, .45);
}
:root[data-theme="light"] {
  --white: #ffffff;
  --off: #F7F9FC;
  --border: #E2E8F0;
  --body: #334155;
  --slate: #64748B;
  --muted: #94A3B8;
  --mint-lt: #D1FAE5;
  --red-lt: #FEE2E2;
  --amber-bg: rgba(245, 166, 35, .1);
  --amber-lt: #FEF3D0;
  --shadow: 0 2px 12px rgba(11, 31, 75, .08);
  --shadow-lg: 0 8px 32px rgba(11, 31, 75, .14);
}

/* ── Marketing-site-only additions (not present in the app) ──────
   Fenced clearly so a diff against app/index.html's :root stays clean. */
:root {
  --maxw: 1160px;
  --nav-h: 72px;
  --sect-y: 5rem;
  --radius: 12px;
  --radius-lg: 20px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Heading/ink text on the page's own background — flips with theme.
     NOT the same as --white, which the app repurposes as a dark card
     SURFACE color in dark mode (not a text color) — using --white for
     heading text renders dark-on-dark. Use --heading instead. */
  --heading: var(--navy);

  /* Text explicitly placed on a fixed navy surface (.section-navy,
     footer, cta-band, parent-frame, shot-frame) — always light,
     regardless of page theme, since navy backgrounds don't flip. */
  --on-dark: #ffffff;
  --on-dark-muted: rgba(255, 255, 255, .65);
}

@media (prefers-color-scheme: dark) {
  :root { --heading: #F1F5F9; }
}
:root[data-theme="dark"] { --heading: #F1F5F9; }
:root[data-theme="light"] { --heading: var(--navy); }