/* School Tracker theme tokens — ported from the design canvas. */
html, body { margin: 0; padding: 0; }

body {
  --bg: #F6F5FB;
  --card: #FFFFFF;
  --card2: #F3F1FA;
  --ink: #251D5B;
  --sub: #6E6A8F;
  --line: #E6E3F2;
  --navy: #1A0076;
  --navyCard: #1A0076;
  --navyInk: #FFFFFF;
  --navySub: #BDB4E8;
  --header: #1A0076;
  --headerInk: #FFFFFF;
  --headerSub: #BDB4E8;
  --gold: #F9B458;
  --goldInk: #3A2400;
  --good: #0E8A5F;
  --goodBg: #E4F4ED;
  --warn: #A16400;
  --warnBg: #FFF1DC;
  --bad: #C03B3B;
  --badBg: #FAE9E9;
  --chip: #EDEAF8;
  --dotOff: #C9C5DE;
  --shadow: 0 1px 2px rgba(26, 0, 118, .05), 0 8px 24px rgba(26, 0, 118, .07);
  background: var(--bg);
  transition: background .25s;
}

body[data-theme="dark"] {
  --bg: #0F0C26;
  --card: #1A1638;
  --card2: #221D46;
  --ink: #EFEDFB;
  --sub: #A39FC6;
  --line: #2C2754;
  --navy: #C7BCFF;
  --navyCard: #241E4E;
  --navyInk: #FFFFFF;
  --navySub: #A79ED6;
  /* The product chrome stays on-brand in both themes. Dark mode only changes
     the content surface and cards, not the global header/sidebar. */
  --header: #1A0076;
  --headerInk: #FFFFFF;
  --headerSub: #BDB4E8;
  --gold: #F9B458;
  --goldInk: #3A2400;
  --good: #43C08C;
  --goodBg: #12352A;
  --warn: #EFB05A;
  --warnBg: #3A2A10;
  --bad: #E57070;
  --badBg: #3B1B1F;
  --chip: #2A2452;
  --dotOff: #4A4574;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 10px 28px rgba(0, 0, 0, .4);
}

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold); }

/* Filled gold actions must keep dark text in both color schemes. Keeping the
   background and foreground in one semantic class prevents dark mode's
   lighter --navy token from leaking into CTA text. */
.gold-action {
  background: var(--gold);
  color: var(--goldInk);
}
.gold-action:hover { color: var(--goldInk); }

::selection { background: rgba(249, 180, 88, .4); }

@keyframes shim {
  0% { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.fade-in { animation: fadeUp .25s ease both; }
.shim-anim { animation: shim 1.1s linear infinite; }
@keyframes dashdraw {
  from { stroke-dashoffset: 1400; }
  to { stroke-dashoffset: 0; }
}
.dashdraw { stroke-dasharray: 1400; animation: dashdraw 1.4s ease-out forwards; }

[x-cloak] { display: none !important; }