/* ElevatePrep design foundation — shared by the public site (styles.css) and the
   practice platform (app/app.css). Navy + gold, matching the printed brand materials.
   Fonts are self-hosted (SIL OFL, see assets/fonts/LICENSE.txt). */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/source-serif-4.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-serif-4-italic.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/public-sans.woff2') format('woff2'); }
@font-face { font-family: 'Public Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/public-sans-italic.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible.woff2') format('woff2'); }
@font-face { font-family: 'Atkinson Hyperlegible'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/atkinson-hyperlegible-bold.woff2') format('woff2'); }

:root {
  /* type */
  --font-sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-readable: 'Atkinson Hyperlegible', Verdana, Tahoma, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.125rem;
  --step-2: 1.375rem;
  --step-3: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
  --step-4: clamp(1.875rem, 1.5rem + 1.6vw, 2.5rem);
  --step-5: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem);

  /* color: navy (primary) and gold (accent), on cool navy-tinted neutrals */
  --navy-950: #0a1628;
  --navy-900: #0f2140;
  --navy-800: #152e57;
  --navy-700: #1c3d74;
  --navy-600: #2a5196;
  --navy-200: #c9d5ea;
  --navy-100: #e3eaf6;
  --navy-50: #f1f4fa;
  --gold-700: #7a5000;
  --gold-600: #a86f00;
  --gold-500: #d99a1e;
  --gold-400: #ecb64a;
  --gold-100: #fbefd2;
  --paper: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #edf1f6;
  --line: #dce3ec;
  --line-strong: #bfc9d6;
  --ink: #131a2a;
  --ink-2: #333c50;
  --muted: #5a6274;
  --ok: #1a7346;
  --ok-soft: #e4f3ea;
  --bad: #b3261e;
  --bad-soft: #fcebea;
  --warn: #8a5a00;
  --warn-soft: #fdf2d9;
  --primary: var(--navy-700);
  --primary-hover: var(--navy-800);
  --primary-soft: var(--navy-50);
  --focus: var(--navy-600);

  /* shape, depth, motion */
  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --shadow-1: 0 1px 2px rgba(15, 33, 64, .06), 0 1px 1px rgba(15, 33, 64, .04);
  --shadow-2: 0 2px 4px rgba(15, 33, 64, .04), 0 8px 20px -6px rgba(15, 33, 64, .12);
  --shadow-3: 0 4px 8px rgba(15, 33, 64, .06), 0 24px 48px -16px rgba(15, 33, 64, .24);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 360ms;
  color-scheme: light;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--gold-100); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: .75rem; z-index: 300; padding: .65rem 1rem; border-radius: var(--r); background: var(--navy-900); color: #fff; font-weight: 600; transform: translateY(-160%); transition: transform var(--dur-2) var(--ease); }
.skip-link:focus { transform: none; }

/* Brand mark: serif monogram with a gold rule — used in both headers. */
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--navy-800); color: #fff;
  font: 600 1.05rem/1 var(--font-serif); letter-spacing: .02em; position: relative; box-shadow: inset 0 -3px 0 var(--gold-500); }