/* 22Academy design tokens v1.2 (25 September 2026, package three). Source of truth: 22academy-design-brief-v1. No value is added here without changing the brief first. */
:root{
  --a22-navy:#172A46; --a22-navy-deep:#0F1D33; --a22-orange:#E8641C; --a22-blue:#279AF9; --a22-blue-btn:#6AB7F2; --a22-blue-btn-hover:#279AF9; --a22-blue-btn-active:#1F8BE6; /* v1.1 20 Sep: button tones, 7.8 / 5.7 / 4.7 to 1 with navy-deep text */ --a22-blue-soft:#E3F1FE; --a22-warm:#FDF1E9; /* v1.1: soft fills for the confidence and question-type charts */
  --a22-white:#FFFFFF; --a22-surface:#F6F7F9; --a22-surface-2:#EDEFF4; --a22-line:#DFE4EA;
  --a22-ink:#1B2430; --a22-soft:#4A5568; --a22-muted:#7A8694; --a22-on-dark:#EAF0F8; --a22-on-dark-mut:#8FA0B8;
  --a22-ok:#2B7448; --a22-ok-bg:#E9F4EE; --a22-bad:#B4432F; --a22-bad-bg:#F9ECE8; --a22-warn:#9A5C08; --a22-warn-bg:#FBF2E3;
  --a22-s1:4px; --a22-s2:8px; --a22-s3:12px; --a22-s4:16px; --a22-s5:24px; --a22-s6:32px; --a22-s7:48px; --a22-s8:64px; --a22-s9:96px;
  --a22-r-control:8px; --a22-r-card:12px; --a22-r-pill:999px;
  --a22-shadow:0 8px 28px rgba(23,42,70,.08); --a22-border:1px solid var(--a22-line);
  --a22-max:1080px; --a22-max-wide:1240px; --a22-gutter:20px; --a22-gutter-lg:32px;
  --a22-font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --a22-rail:260px; --a22-header:64px; --a22-header-lg:88px; /* v1.2: public header 88 px from 900 px, 64 px after 40 px of scroll and on phones (log 157) */
  --a22-track:#C9D1DB; /* v1.2: empty track of bars and rings on public pages (log 130) */
  --a22-on-dark-line:rgba(255,255,255,.12); --a22-on-dark-fill:rgba(255,255,255,.08); --a22-on-dark-border:rgba(255,255,255,.5); /* v1.2: the only translucent whites used on navy */
  --a22-shadow-deep:0 22px 60px rgba(23,42,70,.18); /* v1.2: screenshots in a window frame only (public mockups); every other raised element keeps --a22-shadow */
}