/* ── PunanePastakas shared base ─────────────────────────────────────────
   Tokens verbatim from redpen/app/globals.css. Warm beige paper dominant. */

:root {
  --rp-paper: #f6f8f5;
  --rp-paper-warm: #f7f2ea;
  --rp-paper-soft: #fffaf2;
  --rp-paper-grid: rgba(17, 17, 17, 0.028);
  --rp-ink: #111111;
  --rp-text: #15201b;
  --rp-text-soft: #36433b;
  --rp-muted: #647067;
  --rp-muted-strong: #526059;
  --rp-surface: #ffffff;
  --rp-surface-warm: #fffaf2;
  --rp-surface-subtle: #fbfcfa;
  --rp-border: #dbe2dc;
  --rp-border-strong: #a7b4aa;
  --rp-primary: #53622f;
  --rp-primary-strong: #3f4b24;
  --rp-primary-soft: #eef2df;
  --rp-primary-wash: #f6f8ed;
  --rp-correction: #b91c1c;
  --rp-correction-strong: #991b1b;
  --rp-correction-soft: #fee2e2;
  --rp-correction-wash: #fef2f2;
  --rp-brass: #b78339;
  --rp-brass-strong: #8a5c21;
  --rp-brass-soft: #fff5df;
  --rp-success: #047857;
  --rp-success-soft: #ecfdf5;
  --rp-danger: #b91c1c;
  --rp-focus: #53622f;
  --rp-shadow-ink: 5px 5px 0 #111111;
  --rp-shadow-ink-soft: 4px 4px 0 rgba(17, 17, 17, 0.14);
  --rp-shadow-correction: 4px 4px 0 #b91c1c;
  --rp-radius-panel: 2px;
  --rp-radius-control: 3px;

  /* shared motion vocabulary */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-draw: cubic-bezier(0.45, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { color-scheme: light; -webkit-font-smoothing: antialiased; }

/* Warm beige squared paper — the page itself is the exam booklet */
body {
  margin: 0;
  min-height: 100vh;
  color: var(--rp-text);
  background:
    linear-gradient(var(--rp-paper-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--rp-paper-grid) 1px, transparent 1px),
    var(--rp-paper-warm);
  background-size: 32px 32px;
  font-family: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, sans-serif;
  overflow-x: hidden;
}

.font-display { font-family: "Fraunces", Georgia, "Times New Roman", ui-serif, serif; }
.font-hand { font-family: "Caveat", ui-serif, cursive; }

::selection { background: var(--rp-primary-soft); color: var(--rp-primary-strong); }
:focus-visible { outline: 2px solid var(--rp-focus); outline-offset: 2px; }

/* ── Scroll reveals (slow, elegant — Tres Mares pacing) ─────────────── */
.reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity 0.9s ease, transform 0.9s var(--ease-out);
}
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.10s; }
.reveal[data-delay="2"] { transition-delay: 0.20s; }
.reveal[data-delay="3"] { transition-delay: 0.30s; }
.reveal[data-delay="4"] { transition-delay: 0.40s; }
.reveal[data-delay="5"] { transition-delay: 0.50s; }

/* word-mask rise for big display lines */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-out);
}
.in .line-mask > span, .line-mask.in > span { transform: none; }
.line-mask[data-delay="1"] > span { transition-delay: 0.12s; }
.line-mask[data-delay="2"] > span { transition-delay: 0.24s; }
.line-mask[data-delay="3"] > span { transition-delay: 0.36s; }

/* ── Red-pen stroke drawing ─────────────────────────────────────────── */
.pen-stroke {
  fill: none;
  stroke: var(--rp-correction);
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* JS sets stroke-dasharray/offset; this is the no-JS fallback */
.no-js .pen-stroke { stroke-dashoffset: 0 !important; }

/* The pen sprite that rides the stroke (injected by JS) */
.pen-sprite { will-change: transform; }

/* ── Buttons (mirrors components/ui/button.tsx recipes) ─────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--rp-radius-control);
  border: 1px solid;
  font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
  font-family: inherit; font-size: 1rem;
}
.btn-primary {
  border-color: var(--rp-ink); background: var(--rp-primary); color: #fff;
  box-shadow: 3px 3px 0 var(--rp-ink);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--rp-primary-strong); box-shadow: 4px 4px 0 var(--rp-ink); }
.btn-secondary {
  border-color: var(--rp-border-strong); background: var(--rp-surface); color: var(--rp-text);
}
.btn-secondary:hover { border-color: var(--rp-ink); background: var(--rp-surface-warm); }
.btn-lg { min-height: 3rem; padding: 0 1.5rem; }
.btn-md { min-height: 2.5rem; padding: 0 0.875rem; font-size: 0.875rem; }

/* ── Panel ──────────────────────────────────────────────────────────── */
.panel {
  border-radius: var(--rp-radius-panel);
  border: 2px solid var(--rp-ink);
  background: var(--rp-surface);
  box-shadow: var(--rp-shadow-ink);
}
.panel-soft {
  border-radius: var(--rp-radius-panel);
  border: 1px solid var(--rp-border);
  background: var(--rp-surface);
  box-shadow: var(--rp-shadow-ink-soft);
}
.lift { transition: transform 0.18s ease, box-shadow 0.18s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--rp-ink); }

/* brass "illustrative data" tag */
.tag-brass {
  display: inline-flex; align-items: center; gap: 0.375rem;
  border: 1px solid var(--rp-brass); background: var(--rp-brass-soft);
  color: var(--rp-brass-strong);
  border-radius: var(--rp-radius-control);
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ── Logo mark (filler): red pen bar with a nib cut ─────────────────── */
.logo-mark {
  position: relative; display: inline-block; flex: none;
  width: 0.75rem; height: 2.5rem;
  background: var(--rp-correction);
  border: 1px solid var(--rp-ink);
  box-shadow: 3px 3px 0 var(--rp-ink);
  clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
}
.logo-mark.sm { width: 0.625rem; height: 2rem; box-shadow: 2px 2px 0 var(--rp-ink); }

/* ── ET/EN toggle (SegmentedControl-style) ──────────────────────────── */
.lang-toggle {
  display: inline-flex; border: 1px solid var(--rp-border-strong);
  border-radius: var(--rp-radius-control); overflow: hidden; background: var(--rp-surface);
}
.lang-toggle button {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: 700 0.75rem/1 "Source Sans 3", sans-serif; letter-spacing: 0.06em;
  color: var(--rp-muted-strong); padding: 0.5rem 0.625rem;
}
.lang-toggle button[aria-pressed="true"] { background: var(--rp-ink); color: #fff; }

/* ── Variant switcher (A/B/C, injected by JS) ───────────────────────── */
.variant-switcher {
  position: fixed; z-index: 80; right: 1rem; bottom: 1rem;
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--rp-ink); background: var(--rp-surface);
  border-radius: var(--rp-radius-control);
  box-shadow: 3px 3px 0 var(--rp-ink);
  overflow: hidden;
}
.variant-switcher .vs-label {
  font: 700 0.625rem/1 "Source Sans 3", sans-serif; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rp-muted); padding: 0 0.625rem;
}
.variant-switcher a {
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; text-decoration: none;
  font: 700 0.8125rem/1 "Source Sans 3", sans-serif;
  color: var(--rp-text-soft); border-left: 1px solid var(--rp-border);
}
.variant-switcher a:hover { background: var(--rp-paper-soft); color: var(--rp-correction); }
.variant-switcher a[aria-current="true"] { background: var(--rp-correction); color: #fff; }

/* ── Marginalia (Caveat, correction red only) ───────────────────────── */
.marginalia { font-family: "Caveat", cursive; color: var(--rp-correction); }

/* ── Print: show everything, no motion states ───────────────────────── */
@media print {
  .reveal, .line-mask > span, .chapter-step { opacity: 1 !important; transform: none !important; }
  .pen-stroke { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .pen-overlay, .variant-switcher { display: none !important; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal, .line-mask > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pen-stroke { stroke-dashoffset: 0 !important; stroke-dasharray: none !important; }
  .pen-sprite { display: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}