/* Design tokens — DESIGN_SPEC.md §1. Do not edit values without updating the spec. */
:root {
  /* Manuscript world (from concept 1a) */
  --paper:        #fdf6e9;  /* app background, warm cream */
  --paper-deep:   #f2e7d0;  /* card / inset panels */
  --scan-paper:   #d8c49a;  /* aged-scan mat behind page images */
  --ink:          #43301c;  /* primary text, deep warm brown */
  --ink-soft:     #6b4a20;  /* secondary text, section headers */
  --ink-faint:    #9a8666;  /* metadata, captions */
  --line:         #d9d3c5;  /* hairline rules (the "ruled notebook" lines) */
  --accent:       #a07840;  /* links, active states, checked boxes */

  /* Garland (from concept 2) */
  --marigold:     #f39b1d;  /* exam-ready flower */
  --marigold-hi:  #ffd67a;  /* flower highlight */
  --jasmine:      #ffffff;  /* still-learning bud (with --line stroke) */
  --focus-red:    #d94b2b;  /* this week's focus flower + focus ring */

  --radius: 12px;
  --touch-min: 48px;        /* minimum touch target, kid fingers */
}
[data-theme="dark"] {      /* evening practice: dim, not full dark */
  --paper: #211e19; --paper-deep: #2a251d; --ink: #f2e7d0;
  --ink-soft: #d8c49a; --ink-faint: #9a8666; --line: #3a3320;
}

/* Type — DESIGN_SPEC.md §1.
   Fonts are self-hosted woff2 at build time (subset Kannada + Latin); the
   @font-face declarations ship with the fonts task. Until then these stacks
   degrade to platform serifs. NEVER load Google Fonts at runtime (offline PWA). */
:root {
  --font-latin: "Spectral", Georgia, "Times New Roman", serif;
  --font-kannada: "Noto Serif Kannada", "Noto Sans Kannada", serif;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-latin);
  font-size: 18px;             /* spec base 18px */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.kn { font-family: var(--font-kannada); }

a { color: var(--accent); text-decoration: none; }

button { font: inherit; color: inherit; }

/* Accessibility helpers */
.visually-hidden {
  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 {
  position: absolute;
  left: 8px; top: -48px;
  background: var(--paper-deep);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--radius);
  z-index: 10;
  transition: top 120ms ease;
}
.skip-link:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--focus-red);
  outline-offset: 2px;
}

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