/* Shared tokens for the sheet page and the AR screen: two neutrals (night, paper) + one accent (moon).
   Fonts: Rubik 800 for display, Nunito 400 for text — the same families as the printed book (SIL OFL 1.1). */
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/rubik-cyrillic-800-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Rubik'; font-style: normal; font-weight: 800; font-display: swap; src: url('./fonts/rubik-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/nunito-cyrillic-400-normal.woff2') format('woff2'); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/nunito-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: dark;
  /* neutrals */
  --color-night: #0F1430;
  --color-night-raised: #181E44;
  --color-paper: #F4EFE2;
  /* accent: the moon of the sheet (#FFC83A / #FFD93B family) */
  --color-moon: #FFD23B;
  --color-on-moon: #0F1430;
  /* semantic */
  --color-bg: var(--color-night);
  --color-surface: var(--color-night-raised);
  --color-text: var(--color-paper);
  --color-text-muted: rgb(244 239 226 / 0.72);
  --color-text-faint: rgb(244 239 226 / 0.56);
  --color-line: rgb(244 239 226 / 0.16);
  --color-action-primary: var(--color-moon);
  --color-on-action-primary: var(--color-on-moon);
  --color-focus: var(--color-moon);
  /* type */
  --font-display: 'Rubik', 'Arial Black', sans-serif;
  --font-text: 'Nunito', 'Trebuchet MS', sans-serif;
  --text-size: 17px;
  --text-leading: 1.6;
  --micro-size: 13px;
  /* motion, shape, rhythm */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fill: 500ms;
  --duration-label: 320ms;
  --radius-pill: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --gutter: 16px;
  --measure: 34rem;
  --tap-min: 44px;
  --cta-min: 56px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--text-size) / var(--text-leading) var(--font-text);
  text-wrap: pretty;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; margin: 0; text-wrap: balance; hyphens: none; }
h1 { font-size: clamp(2.6rem, 8vw, 6rem); line-height: 0.92; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 5.5vw, 3.5rem); line-height: 0.98; letter-spacing: -0.02em; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Buttons: two kinds only — filled, or transparent with a hairline. Pill radius, nothing in between. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--cta-min); padding: 0 28px;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  font: 800 1.0625rem / 1 var(--font-display); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fill) var(--ease), color var(--duration-fill) var(--ease), border-color var(--duration-fill) var(--ease);
}
.btn-primary { background: var(--color-action-primary); color: var(--color-on-action-primary); }
.btn-primary:hover { background: #FFDE6E; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: rgb(244 239 226 / 0.45); }
.btn-ghost:hover { border-color: var(--color-text); }

.micro { font-size: var(--micro-size); line-height: 1.8; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
.note { font-size: var(--micro-size); line-height: 1.5; color: var(--color-text-faint); }

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