/* =====================================================================
   CMA Study — design tokens
   Layer 1: palette (verbatim from reference/SecB-1.html, plus teal-700/300).
   Layer 2: semantic tokens. Components use ONLY semantic tokens, so
            [data-theme="dark"] swaps the whole app by redefining layer 2.
   theme-boot.js always sets data-theme on <html> before first paint.
   ===================================================================== */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: optional; /* never re-lays out the page when the font arrives late; cached copies are always used */
  font-weight: 100 900;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
}
/* Optional reading font for question text (settings.readFont = "atkinson"); downloaded only when chosen. */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url('../fonts/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: italic;
  font-display: swap;
  font-weight: 700;
  src: url('../fonts/atkinson-hyperlegible-latin-700-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-display: optional; /* never re-lays out the page when the font arrives late; cached copies are always used */
  font-weight: 100 800;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations');
}

:root {
  /* ---- palette ---- */
  --navy-950: #071a2e;
  --navy-900: #0b2239;
  --navy-800: #113654;
  --navy-700: #174c70;
  --teal-700: #0f766e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-300: #5eead4;
  --teal-100: #ccfbf1;
  --teal-50: #f0fdfa;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --white: #ffffff;
  --red-700: #b42318;
  --red-500: #f04438;
  --red-50: #fff5f4;
  --green-700: #067647;
  --green-500: #12b76a;
  --green-100: #d1fadf;
  --green-50: #ecfdf3;
  --amber-900: #7a2e0e;
  --amber-50: #fff8eb;
  --amber-200: #fedf89;

  /* ---- type, shape, motion ---- */
  --font-sans: 'Inter Variable', Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --radius: 18px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 278px;

  /* ---- semantic: light ---- */
  color-scheme: light;
  --bg: #eef3f7;
  --surface: var(--white);
  --surface-2: var(--slate-50);
  --surface-3: var(--slate-100);
  --border: var(--slate-200);
  --border-strong: var(--slate-300);
  --text: var(--slate-900);
  --text-2: var(--slate-700);
  --text-muted: var(--slate-600); /* 6.78:1 on --bg (reference used slate-500: 4.26:1) */
  --heading: var(--navy-950);
  --heading-2: var(--navy-900);
  --decor: var(--slate-300); /* decorative only (big topic numbers), never body text */
  /* question reading text (stems, options, explanations, their tables) */
  --font-read: var(--font-sans);
  --read-size: 1.0625rem; /* 17px; A− / A+ steps below */
  --read-measure: 72ch;
  --read-text: var(--slate-800);
  --table-rule: var(--slate-200);

  --accent: var(--teal-500); /* fills, rings, borders */
  --accent-strong: var(--teal-600);
  --accent-text: var(--teal-700); /* small text: 5.47:1 on white (teal-600 was 3.74:1) */
  --accent-soft: var(--teal-50);
  --accent-soft-2: var(--teal-100);
  --accent-border: #99f6e4;
  --on-accent: var(--navy-950);

  --brand: var(--navy-900);
  --brand-hover: var(--navy-800);
  --on-brand: var(--white);
  --brand-gradient: linear-gradient(110deg, var(--navy-900), var(--navy-800));

  --side-bg: var(--navy-950);
  --side-text: #c4d2df;
  --side-muted: #8fa6bb;
  --side-hover: rgba(255, 255, 255, 0.06);
  --side-active: rgba(20, 184, 166, 0.16);
  --side-border: rgba(255, 255, 255, 0.08);

  --code-bg: var(--navy-950);
  --code-text: #dce8f2;
  --code-strong: var(--white);
  --code-label: #71e0d2;
  --code-note: #9fb5c9;

  --fav: var(--green-700);
  --fav-bg: var(--green-50);
  --fav-border: #75e0a7;
  --fav-solid: var(--green-500);
  --unfav: var(--red-700);
  --unfav-bg: var(--red-50);
  --unfav-border: #fda29b;
  --unfav-solid: var(--red-500);

  --trap-text: var(--amber-900);
  --trap-bg: var(--amber-50);
  --trap-border: var(--amber-200);
  --note-text: #0b4a45;
  --note-bg: var(--teal-50);
  --note-border: #99f6e4;

  --topbar-bg: rgba(255, 255, 255, 0.92);
  --focus: rgba(20, 184, 166, 0.55);
  --shadow: 0 12px 40px rgba(7, 26, 46, 0.08);
  --shadow-sm: 0 2px 12px rgba(7, 26, 46, 0.06);
  --overlay: rgba(7, 26, 46, 0.55);

  /* charts (read by charts.js) */
  --chart-1: var(--teal-600);
  --chart-2: var(--navy-700);
  --chart-3: #d97706;
  --chart-4: #7c3aed;
  --chart-5: #db2777;
  --chart-grid: var(--slate-200);
  --chart-text: var(--slate-600);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --read-text: #d6dee8; /* off-white, softer than headings */
  --table-rule: rgba(148, 163, 184, 0.16);
  --bg: #06121e;
  --surface: #0d1f31;
  --surface-2: #11283d;
  --surface-3: #163249;
  --border: #1f3a55;
  --border-strong: #2b4a68;
  --text: #e2e8f0;
  --text-2: #cbd5e1;
  --text-muted: #a6b8ca;
  --heading: #f1f5f9;
  --heading-2: #e2ecf5;
  --decor: #24425f;

  --accent: var(--teal-500);
  --accent-strong: var(--teal-500);
  --accent-text: var(--teal-300);
  --accent-soft: rgba(20, 184, 166, 0.12);
  --accent-soft-2: rgba(20, 184, 166, 0.2);
  --accent-border: rgba(94, 234, 212, 0.35);
  --on-accent: var(--navy-950);

  --brand: var(--teal-500);
  --brand-hover: #2dd4bf;
  --on-brand: var(--navy-950);
  --brand-gradient: linear-gradient(110deg, #0f2a44, #143a5a);

  --side-bg: #040d17;
  --side-border: rgba(255, 255, 255, 0.07);

  --code-bg: #030b14;

  --fav: #75e0a7;
  --fav-bg: rgba(18, 183, 106, 0.12);
  --fav-border: rgba(117, 224, 167, 0.4);
  --unfav: #fda29b;
  --unfav-bg: rgba(240, 68, 56, 0.12);
  --unfav-border: rgba(253, 162, 155, 0.4);

  --trap-text: #fcd9a8;
  --trap-bg: rgba(217, 119, 6, 0.12);
  --trap-border: rgba(254, 223, 137, 0.3);
  --note-text: #b7f3e9;
  --note-bg: rgba(20, 184, 166, 0.1);
  --note-border: rgba(94, 234, 212, 0.3);

  --topbar-bg: rgba(6, 18, 30, 0.9);
  --focus: rgba(94, 234, 212, 0.6);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.3);
  --overlay: rgba(0, 0, 0, 0.6);

  --chart-1: var(--teal-300);
  --chart-2: #7cb4e4;
  --chart-3: #fbbf24;
  --chart-4: #c4b5fd;
  --chart-5: #f9a8d4;
  --chart-grid: #1f3a55;
  --chart-text: #a6b8ca;
}

/* Question reading settings (theme-boot.js sets the attributes before first paint; CMA.ui.reading changes them). */
:root[data-read-size='0'] {
  --read-size: 1rem;
}
:root[data-read-size='2'] {
  --read-size: 1.125rem;
}
:root[data-read-size='3'] {
  --read-size: 1.25rem;
}
:root[data-read-font='atkinson'] {
  --font-read: 'Atkinson Hyperlegible', var(--font-sans);
}