/*
  Academy-basis: de kleurtokens (.academy-root), de light-modus-overrides en
  de focus-/selectieregels. Dit bestand blijft een statisch stylesheet in de
  gedeelde index.html, omdat het inlogscherm en de sessiecontrole op
  academy.shieldit.nl deze tokens al nodig hebben vóórdat de Academy-chunk
  geladen is.

  De animaties en de layout van de Academy zelf stonden hier ook, in
  public/index.css: 14 kB render-blocking op de marketingpagina waar er niets
  van gebruikt werd (audit 14 september 2026). Die staan nu in
  components/academy/academy.css en laden met de Academy-chunk mee.
*/
/* ─── Light mode overrides ─── */

/* Text */
.light .text-white  { color: #0F131E !important; }
.light .text-gray-100 { color: #1B1E2E !important; }
.light .text-gray-200 { color: #334155 !important; }
.light .text-gray-300 { color: #475569 !important; }
.light .text-gray-400 { color: #64748B !important; }
.light .text-gray-500 { color: #94A3B8 !important; }
.light .text-gray-600 { color: #CBD5E1 !important; }

/* White overlay backgrounds → subtle dark overlays */
.light .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.025) !important; }
.light .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,0.035) !important; }
.light .bg-white\/5  { background-color: rgba(0,0,0,0.05)  !important; }
.light .bg-white\/10 { background-color: rgba(0,0,0,0.07)  !important; }
.light .bg-white\/20 { background-color: rgba(0,0,0,0.10)  !important; }

/* Borders */
.light .border-white\/5  { border-color: rgba(0,0,0,0.08)  !important; }
.light .border-white\/10 { border-color: rgba(0,0,0,0.12)  !important; }
.light .border-white\/20 { border-color: rgba(0,0,0,0.16)  !important; }

/* Hover states */
.light .hover\:bg-white\/5:hover  { background-color: rgba(0,0,0,0.05) !important; }
.light .hover\:bg-white\/10:hover { background-color: rgba(0,0,0,0.08) !important; }
.light .hover\:text-white:hover   { color: #0F131E !important; }

/* Selection highlight */
.light .selection\:bg-accent\/30::selection { background-color: rgba(175,196,229,0.45); }

/* Backdrop overlay (mobile sidebar) */
.light .bg-black\/60 { background-color: rgba(0,0,0,0.35) !important; }

/* Glass nav (marketing site) */
.light .glass-nav { background: rgba(255,255,255,0.92) !important; border-bottom-color: rgba(15,19,30,0.1) !important; }

/* Academy semantic surface system */
.academy-root {
  --c-bg: var(--c-canvas);
  --c-practice: 34 211 238;
  --c-surface: var(--c-panel);
  --c-hl: var(--c-elevated);
  color: rgb(var(--c-ink));
  color-scheme: dark;
}

.light .academy-root {
  --c-practice: 21 94 117;
  color-scheme: light;
}

.academy-root :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid rgb(var(--c-focus));
  outline-offset: 2px;
}

/* Legacy filled-primary controls inherit the computed foreground even before
   they migrate from text-canvas to the semantic text-onPrimary utility. */
.academy-root .bg-primary.text-canvas {
  color: rgb(var(--c-on-primary));
}

.academy-root ::selection {
  background: rgb(var(--c-primary) / 0.28);
  color: rgb(var(--c-ink));
}

@media (prefers-reduced-motion: reduce) {
  .academy-root,
  .academy-root *,
  .academy-root *::before,
  .academy-root *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}