*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Screen-reader-only utility ────────────────────────── */

.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 (WCAG 2.4.1) ────────────────────────────── */

.skip-link {
  position: absolute;
  top: -100%;
  left: 8px;
  z-index: 9999;
  padding: 8px 16px;
  background: var(--accent);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 0 0 4px 4px;
  text-decoration: none;
  transition: top 0.1s;
}

.skip-link:focus {
  top: 0;
}

/* ── Focus Indicators (WCAG 2.4.7) ────────────────────── */

*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Reduced Motion (WCAG 2.3.3) ───────────────────────── */

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

/* ── Web Fonts ─────────────────────────────────────────── */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-hyperlegible-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('../fonts/atkinson-hyperlegible-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Sans 3';
  src: url('../fonts/source-sans-3-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/roboto-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Open Sans';
  src: url('../fonts/open-sans-400.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ── Root Variables ────────────────────────────────────── */

:root {
  --font-sans:   'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:   "SF Mono", "Fira Code", "Cascadia Code", monospace;

  /* Reader font size — adjustable via display settings */
  --reader-font-size: clamp(32px, 8vw, 84px);

  /* Touch target minimum: 44px per Apple HIG */
  --tap-min:     44px;
}

/* ── Dark Theme (default) ──────────────────────────────── */

[data-theme="dark"] {
  --bg:          #0b0b0f;
  --fg:          #f2f2f2;
  --fg-dim:      rgba(242, 242, 242, 0.5);
  --fg-faint:    rgba(242, 242, 242, 0.25);
  --accent:      #6b8afd;
  --surface:     #1a1a24;
  --border:      #2a2a38;
  --orp-color:   #e84040;
  --red-letter:  #ffcccc;
  --orp-red-letter: var(--orp-color);

  --reader-bg:   radial-gradient(ellipse at center, #111111 0%, #111133 100%);
  --hud-bg:      linear-gradient(135deg, #1a1f3a 0%, #2d1b3d 100%);
  --status-bg:   linear-gradient(transparent, rgba(11, 11, 15, 0.9));
  --overlay-bg:  rgba(0, 0, 0, 0.7);
}

/* ── Light Theme ───────────────────────────────────────── */

[data-theme="light"] {
  --bg:          #eeeeee;
  --fg:          #1a1a2e;
  --fg-dim:      rgba(26, 26, 46, 0.70);
  --fg-faint:    rgba(26, 26, 46, 0.25);
  --accent:      #4a6cf7;
  --surface:     #e0e0e8;
  --border:      #c8c8d4;
  --orp-color:   #d03030;
  --red-letter:  #b81c1c;
  --orp-red-letter: var(--orp-color);

  --reader-bg:   radial-gradient(ellipse at center, #EEEEDD 0%, #EEEEEE 100%);
  --hud-bg:      linear-gradient(135deg, #c8cee8 0%, #d8c8e0 100%);
  --status-bg:   linear-gradient(transparent, rgba(238, 238, 238, 0.9));
  --overlay-bg:  rgba(0, 0, 0, 0.4);
}

html {
  /* Default to dark before JS runs to avoid flash */
  --bg: #0b0b0f;
  --fg: #f2f2f2;
}

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Prevent pull-to-refresh on mobile */
  overscroll-behavior: none;
}

body {
  display: flex;
  flex-direction: column;
}