/* Dullaby design tokens. Every colour, size and timing the reader uses starts here;
   style.css only refers to these names. See docs/DESIGN.md for what each one is for. */
:root {
  /* ---------- colour ---------- */
  /* Surfaces: warm black, never pure black except the sleep fade. */
  --bg: #0a0705;            /* page, and the theme-color the phone shows */
  --panel: #130d09;         /* bottom sheets, one step above the page */
  --night: #000;            /* the sleep-timer fade only */

  /* Ink: one warm hue at a time, chosen by the reader. */
  --amber: #b9863f;         /* default */
  --ember: #a4493a;         /* dim red, for the darkest rooms */
  --ink: var(--amber);

  /* Every other colour is the ink mixed into the background, so a change of ink
     re-tints the whole page and nothing is brighter than the text. */
  --muted: color-mix(in srgb, var(--ink) 55%, var(--bg));   /* labels, sources, thumbs */
  --faint: color-mix(in srgb, var(--ink) 22%, var(--bg));   /* borders, tracks, dividers */
  --wash: color-mix(in srgb, var(--ink) 7%, var(--bg));     /* code blocks, list rules */

  /* Glow dims the whole reading column. The reader sets it; 0.2 is the floor. */
  --glow: 0.8;

  /* ---------- type ---------- */
  --serif: "Literata", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --size: 21px;             /* reading size; the reader steps it between 15 and 34 */
  --leading: 1.68;
  --measure: 34em;          /* column width at the reading size */
  --weight-body: 350;
  --weight-title: 450;
  --weight-subhead: 500;

  --ui-size: 15px;          /* buttons and sheet text */
  --ui-hint: 14px;          /* explanations inside sheets */
  --ui-label: 12px;         /* small caps row labels */
  --field-size: 16px;       /* inputs; 16px stops iOS zooming on focus */

  --tracking-label: 0.12em;
  --tracking-shelf: 0.16em;
  --tracking-note: 0.18em;

  /* ---------- space ---------- */
  --gutter: 20px;           /* side margin of the reading column */
  --lead-in: 18vh;          /* empty dark space above the first passage */
  --passage-gap: 4.5em;     /* between passages, around the · · · divider */
  --sheet-pad: 16px;
  --sheet-gap: 14px;        /* between rows in a sheet */
  --row-gap: 12px;          /* label to control */
  --chip-gap: 8px;          /* between chips in a group */

  /* ---------- shape ---------- */
  --line: 1px;              /* every border is one hairline */
  --track: 2px;             /* slider track */
  --thumb: 18px;            /* slider thumb */
  --radius-pill: 999px;     /* buttons and chips */
  --radius-field: 6px;      /* text inputs */
  --touch: 40px;            /* smallest tap target */
  --corner-size: 44px;      /* the moon button */
  --corner-opacity: 0.28;   /* the moon is barely there */

  /* ---------- motion ---------- */
  /* Almost nothing moves. The sleep fade is the only CSS transition; drift speed,
     the touch pause and the fade curve live in app.js (see docs/DESIGN.md). */
  --fade-step: 1.2s;        /* smoothing between sleep-fade updates */
  --ease-none: linear;

  color-scheme: dark;
}
:root[data-color="ember"] { --ink: var(--ember); }