/* Design tokens: the only place with raw colours, sizes and motion values. «Mystery Quest»: parchment and ink by day, deep blue and gold at night.
   Light = "day" is the default; theme.js sets data-theme on <html> before the first paint (the learner's choice, else Telegram, else the device), and in a lesson the story
   switches it: day scenes are light, evening scenes are dark (js/screens/player.js).
   Every text/background pair is checked for contrast by tests/front.test.mjs (text >= 4.5:1, interface parts >= 3:1) in both themes:
   when you add a pair, add it to the matrix there. Colours used by the matrix are flat hex values; decorative colours (gold, gradients) are not text. */
:root {
  --f-title: "Cormorant Garamond", "Forum", Georgia, "Times New Roman", serif;
  --f-cap: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --f-body: "Alegreya Sans", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-hand: "Caveat", "Neucha", "Segoe Script", cursive;
  --font: var(--f-body);
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* type scale; fields use --t-body (16px) or more: smaller and iOS zooms the page on focus (zoom is not disabled here) */
  --t-cap: 12px; --t-meta: 14px; --t-sm: 16px; --t-body: 18px; --t-title: 22px; --t-large: 30px;
  /* spacing (4px grid), radii, motion, sizes */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --r-pill: 999px;
  --ease: cubic-bezier(.2, .8, .2, 1); --d1: 120ms; --d2: 200ms; --d3: 320ms;
  --bar-h: 52px; --fab: 56px; --column: 640px; --tab-h: 64px;

  /* Safe areas, in CSS only: the phone's own (env) and the ones Telegram reports (>= 8.0). The Telegram variables do not exist until the
     client sends an event, so every use has a fallback: without one the whole declaration is dropped. */
  --sat: max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --sal: max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px));
  --sar: max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px));

  /* palette: day */
  color-scheme: light;
  --bg: #F3E5C0;          --surface: #FBF1D6;     --surface-2: #EAD5A2;
  --text: #3A2A1A;        --muted: #5F4630;
  --border: #8C6B3A;      --line: rgba(110, 70, 25, .32);         /* border: outlines (3:1); line: hairline dividers */
  --accent: #7C1F2C;      --accent-contrast: #FFF3D6;             --accent-soft: #F0D9AE;
  --danger: #A02218;      --danger-contrast: #FFF3D6;             --danger-soft: #F7D9D1;
  --ok: #2D6B34;          --ok-contrast: #FFFFFF;                 --ok-soft: #DCEBC4;
  --card-a: #FBF0D2;      --card-b: #F2DDAA;                      /* the two stops of the parchment gradient */
  --bg-glow: #FFF4D2;                                             /* the light at the top of the page */
  --gold: #C99A33;        --gold-2: #F3D57E;        --gold-3: #8A6112;
  --burg-1: #A12D3E;      --burg-2: #6D1827;        --burg-3: #3A0B15;      /* the burgundy button */
  --scrim: rgba(25, 15, 5, .5);  --scrim-blur: 6px;
  --shadow: 0 10px 34px rgba(45, 25, 5, .30), 0 2px 8px rgba(45, 25, 5, .14);
  --paper-shadow: rgba(45, 25, 5, .50);
}

/* Full screen (Bot API 8.0): Telegram hides its header and keeps its own buttons (close, menu) over the top of the page. The space they take is the content safe area; it is added to the
   device's own (notch). Whether Telegram reports it as an addition or already inside the device's is not documented: the phone test records both numbers (js/trace.js). */
html.fullscreen { --sat: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px)); }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E2538;          --surface: #16405E;     --surface-2: #1F5075;
  --text: #F5E7C4;        --muted: #B9CAD2;
  --border: #7FA0B5;      --line: rgba(243, 213, 126, .30);
  --accent: #F3D57E;      --accent-contrast: #10283A;             --accent-soft: #2A5273;
  --danger: #FF9D92;      --danger-contrast: #2A0805;             --danger-soft: #4A2422;
  --ok: #8FD99A;          --ok-contrast: #0A2414;                 --ok-soft: #1F4A35;
  --card-a: #1B4A6B;      --card-b: #123A57;
  --bg-glow: #1A4766;
  --gold: #E7BC5D;        --gold-2: #F3D57E;        --gold-3: #C99A33;
  --burg-1: #A12D3E;      --burg-2: #6D1827;        --burg-3: #2A0610;
  --scrim: rgba(0, 0, 0, .62);  --scrim-blur: 6px;
  --shadow: 0 12px 38px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .35);
  --paper-shadow: rgba(0, 0, 0, .65);
}