/* =========================================================================
   base.css — colour tokens, themes and basic typography.

   All colours are CSS variables ("tokens"). Components only use the
   variables, so changing a theme means changing values here, nowhere else.

   Theme rules:
   - By default we follow the operating system (prefers-color-scheme).
   - Setting <html data-theme="light"> or "dark" overrides that
     (the theme toggle arrives in Milestone 6).
   ========================================================================= */

:root {
  /* Light theme (default) */
  --bg: #f7f6f2;
  --surface: #ffffff;
  --text: #1c1c1e;
  --muted: #6b6b70;
  --border: #e2e0da;
  --accent: #d9363e;          /* the pivot (ORP) letter + brand accent */
  --primary: #1f4fd1;         /* primary buttons */
  --primary-text: #ffffff;
  --focus: #1f4fd1;
  --error: #b42318;

  /* Fonts: system fonts load instantly and look native everywhere */
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-reading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Size of the flashing word. clamp(min, preferred, max) scales with the window. */
  --word-size: clamp(2rem, 6vw, 3.5rem);

  --radius: 12px;

  color-scheme: light;
}

/* Dark theme when the OS asks for it, unless the user forced light mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141416;
    --surface: #1e1e21;
    --text: #ececef;
    --muted: #9a9aa2;
    --border: #2f2f34;
    --accent: #ff5a60;
    --primary: #5b8cff;
    --primary-text: #0b0b0d;
    --focus: #8fb0ff;
    --error: #ff8a80;
    color-scheme: dark;
  }
}

/* Dark theme when the user forces it (same values as above) */
:root[data-theme="dark"] {
  --bg: #141416;
  --surface: #1e1e21;
  --text: #ececef;
  --muted: #9a9aa2;
  --border: #2f2f34;
  --accent: #ff5a60;
  --primary: #5b8cff;
  --primary-text: #0b0b0d;
  --focus: #8fb0ff;
  --error: #ff8a80;
  color-scheme: dark;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.5;
}

/* Visible keyboard focus for accessibility */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Make sure the [hidden] attribute always wins over display rules */
[hidden] {
  display: none !important;
}

/* Taps respond instantly: no waiting to see if it's a double-tap zoom */
button,
input,
select,
label,
summary,
.rsvp {
  touch-action: manipulation;
}

/* Text for screen readers only (hidden on screen) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* People who turn off animations in their system settings get none here */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}