/* Slate — design tokens.
 *
 * The ONLY file in this repository permitted to contain a colour, a size, or a
 * spacing value. Everything else references these. tools/check.py fails the
 * deploy if a literal appears elsewhere (TE-24, TE-25).
 *
 * Light is the design. Dark is the same design at low luminance, for a dim room.
 * Follow-the-device is the default; an adult may override it in the adult area.
 * See docs/requirements/design-system.html, section 03.
 */

:root {
  /* ---- Paper and ink. Warm, never pure white, never pure black. ---- */
  --paper:      #f7f5f0;   /* the ground */
  --paper-sunk: #f1ece1;   /* a recess: a covered word, an inactive row */
  --ink:        #24221e;   /* words she reads */
  --ink-soft:   #55504a;   /* secondary text */
  --ink-faint:  #8a8077;   /* labels, the adult area */
  --rule:       #ddd6c8;   /* a ruled line, a border */
  --accent:     #4a6070;   /* muted blue-grey. Meaning only, never decoration */

  /* ---- Type ---- */
  --face-word: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
               "Times New Roman", serif;   /* everything she reads */
  --face-label: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
                                           /* adult-facing labels only */

  /* Raised across the board after the first hour on her phone: 2.25 / 1.5 /
   * 1.0625 / 0.75 were all too small in a six-year-old's hands, and the error
   * was in the scale rather than in one token (DS-23). Set on the device. */
  --size-word:   2.75rem;  /* a word in a work. The largest thing on screen */
  --size-body:   1.25rem;
  --size-choice: 1.75rem;  /* the two spellings in Work A, and her list */
  --size-label:  0.8125rem; /* adult area only */
  --line-tight:  1.25;
  --line-body:   1.6;

  /* ---- Spacing. One scale, no values between. ---- */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;

  /* ---- Structure ---- */
  --column:  26rem;   /* max content width. A big screen gets air, not more */
  --target:  3rem;    /* minimum touch target, 48px */
  --gap:     var(--s2);  /* minimum space between targets */
  --stroke:  1px;     /* every border. There is only one width */
  --radius:  0;       /* paper has no rounded corners */
}

/* Dark: same relationships, lower luminance. Contrast is deliberately moderate
 * — a bright white-on-black is as harsh as the inverse, and this is read in a
 * dim room.
 *
 * Three states, not two. With no choice recorded the device decides, which is
 * the default; an explicit choice stamps data-theme on the root and wins in
 * either direction. The light block above is the base, so a colour is never
 * defined only inside a media query. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #1c1a18;
    --paper-sunk: #242220;
    --ink:        #e6e1d8;
    --ink-soft:   #aaa49a;
    --ink-faint:  #7d766c;
    --rule:       #35312c;
    --accent:     #8fa9bd;
  }
}

:root[data-theme="dark"] {
  --paper:      #1c1a18;
  --paper-sunk: #242220;
  --ink:        #e6e1d8;
  --ink-soft:   #aaa49a;
  --ink-faint:  #7d766c;
  --rule:       #35312c;
  --accent:     #8fa9bd;
}

/* There is no --error, no --success, no --warning, and no red of any hue.
 * A mistake is the material not resolving. Nothing is ever marked wrong.
 *
 * There is no --duration, --easing, or --shadow. Nothing moves and nothing
 * floats, so the primitives do not exist to be reached for. */