/*
 * Tokens, reset and base typography.
 *
 * `stylesheet_link_tag :app` includes every stylesheet in this directory in
 * alphabetical order, so the cascade runs: actiontext -> application (here)
 * -> components -> screens. Keep this file to variables and element defaults.
 */

:root {
  --navy:          #0a1424;
  --navy-raised:   #0f1d31;
  --navy-sunken:   #081020;
  --gold:          #f0a81e;
  --gold-bright:   #f5b731;
  --gold-dim:      #8a6414;
  --green:         #2fa84f;
  --green-dark:    #17381f;

  --text:          #f2ede3;
  --text-muted:    #a9b4c4;
  --text-faint:    #6f7d90;
  --text-on-gold:  #1a1204;
  --text-on-paper: #14100a;

  --paper:         #fbfaf7;

  --hairline:      rgba(240, 168, 30, 0.22);
  --hairline-soft: rgba(240, 168, 30, 0.10);

  --font-serif: Georgia, "Times New Roman", "Liberation Serif", serif;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  --radius:    0.75rem;
  --radius-lg: 1rem;

  --tab-bar-height: 4.25rem;
  --content-width: 34rem;

  /* Reader-side font scale, driven by the A-/A+ controls on the study screen. */
  --reading-scale: 1;

  /* Motion: solid and unhurried. No bounce, no elastic — see DESIGN.md §4/§6. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard:  ease;

  --duration-instant:    120ms;
  --duration-fast:       180ms;
  --duration-standard:   250ms;
  --duration-deliberate: 400ms;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-width: thin;
  scrollbar-color: #2b3a52 var(--navy);
}

body {
  margin: 0;
  background-color: var(--navy);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1rem;
  line-height: 1.55;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--duration-instant) var(--ease-standard);
}
a:hover { color: var(--gold-bright); }

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
  transition: outline-offset var(--duration-instant) var(--ease-standard);
}

/*
 * Shared entrance for content that appears without a full navigation: a quiz
 * step, a freshly streamed notification badge, a result value. Re-triggers
 * automatically whenever the element enters the render tree (hidden -> shown,
 * or freshly inserted by Turbo Stream) — no JS required.
 */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: scale(1); }
}

/* Turbo's navigation progress bar, in the brand gold. */
.turbo-progress-bar {
  height: 3px;
  background: linear-gradient(to right, var(--gold-dim), var(--gold-bright));
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}