/* Design tokens — the "Bilderbuch" system (plan §11; specs/…/mockups/00-bilderbuch-board.html :root, ported
   verbatim except: no data: URIs (CSP img-src 'self' → img/art/grain.svg) and the reading-text syllable colours,
   darkened to ≥ 7:1 on paper (plan §7.1 FND-0033). Every colour in the app comes from here. */
@font-face { font-family: "Andika"; src: url("../fonts/andika-400.woff2") format("woff2"); font-weight: 400;
  font-style: normal; font-display: swap; }
@font-face { font-family: "Andika"; src: url("../fonts/andika-700.woff2") format("woff2"); font-weight: 700;
  font-style: normal; font-display: swap; }

:root {
  /* paper & ink */
  --paper: #FBF5E9; --paper-deep: #F1E6CF; --paper-edge: #E2D2B1; --white: #FFFDF7; --card: #FFFBF2; --wall: #FFF1D8;
  --ink: #3B2F2A; --ink-soft: #6E5F54; --shade-rgb: 92, 64, 38;
  /* landscape */
  --meadow: #8DB86B; --meadow-light: #CFE3A8; --meadow-deep: #5E8F4E; --moss: #47703F;
  --hill-far: #C4DBB0; --hill-mid: #A7C982; --sky: #A9D3E8; --sky-light: #DDEFF5; --lake: #5E9CC2;
  --path: #EBD7A9; --path-light: #F5E8C8; --path-dot: #D6BC86; --mist: #FAF8F2;
  /* warm accents */
  --sun: #F4C34D; --sun-light: #FBE3A0; --sun-deep: #E39E32;
  --fox: #E2703A; --fox-light: #F0904F; --fox-deep: #C2532B; --fox-cream: #FFF4E2; --fox-paw: #5B3A2B;
  --petrol: #3E8A8C; --petrol-deep: #2C6A6C; --bark: #8E5C37; --lavender: #B7A6D6; --rose: #F29A86;
  --silhouette: #E3D4B9;
  /* reading aid + feedback (no red feedback anywhere: misses are amber, success is gold + leaf green) */
  --syl-blue: #1F4E9A; --syl-red: #8E2A21; --amber: #E9A23B; --glow: #FFE89A; --leaf: #5E8F4E;
  /* parent register */
  --parent-bg: #EEEFF1; --parent-card: #FFFFFF; --parent-key: #F6F7F8; --parent-ink: #2F343A; --parent-dot: #8E939B; --parent-sub: #5C6168;
  --parent-line: #D9DCE1; --parent-accent: #2F6F72; --parent-danger: #9A3B2E;

  --shadow-lift: 0 14px 30px -14px rgba(var(--shade-rgb), .45), 0 3px 0 rgba(var(--shade-rgb), .07);
  --shadow-float: 0 26px 50px -22px rgba(var(--shade-rgb), .55);
  --r-card: 38px 30px 42px 32px / 32px 40px 30px 38px;
  --r-blob: 52% 48% 50% 50% / 48% 52% 48% 52%;
  --r-chip: 22px 18px 24px 19px / 19px 24px 18px 22px;
  --font-read: "Andika", "Comic Neue", "Nunito", system-ui, sans-serif;
  --font-ui: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, sans-serif;
  --font-parent: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --grain: url("../img/art/grain.svg");

  /* sizes: one dominant element per screen, child targets ≥ 88 px (plan §11) */
  --tap: 88px;
  --u: min(1vw, 1.45vh);           /* one layout unit, ≈ 11.8 px on an iPad Air in landscape */
  --t-motion: 320ms;
  --ease-soft: cubic-bezier(.3, .7, .4, 1);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
}