/* TURN design tokens, layer 3: rendered size, type and motion.
   Real CSS pixels: every TURN stylesheet is authored at its rendered size (the
   runtime 0.75 rewriter was retired in 1.25.0).
   Principle: dense, not tiny. No text below --turn-text-floor; no touch target
   below --turn-target-min. */
:root {
  /* Type scale (mobile-first). Weight carries hierarchy; the system sans stays. */
  --turn-text-floor: 11px;
  --turn-type-micro: 11px;                          /* chips, stat and HUD captions: uppercase, 800, +0.04em */
  --turn-type-small: 13px;                          /* secondary copy, descriptions */
  --turn-type-body: 15px;                           /* body text, button labels */
  --turn-type-title: clamp(17px, 4.4vw, 21px);      /* card and dialog-section titles */
  --turn-type-heading: clamp(22px, 6vw, 30px);      /* screen headings */
  --turn-type-display: clamp(28px, 8vw, 44px);      /* THE LOT, SETTINGS, ACHIEVEMENTS */
  --turn-weight-label: 800;
  --turn-weight-title: 900;
  --turn-weight-display: 950;
  --turn-leading-tight: 1;
  --turn-leading-title: 1.1;
  --turn-leading-body: 1.35;
  --turn-tracking-micro: 0.04em;

  /* Layout rhythm on top of the 4-based --turn-space-* scale. */
  --turn-gutter: clamp(12px, 4vw, 24px);
  --turn-stack: clamp(8px, 2.2vh, 16px);
  --turn-content-max: 640px;                        /* portrait reading width on tall screens */

  /* Touch (WCAG 2.5.5 AAA, Apple HIG). */
  --turn-target-min: 44px;
  --turn-control-height: max(var(--turn-target-min), 2.75em);

  /* Buttons: one rounded-rectangle shape. Pills are for chips, tags and toggles;
     the round orange close is the one dismiss shape. */
  --turn-radius-control: 12px;
  --turn-border-control: 3px;
  --turn-shadow-press: 1px 1px 0 var(--turn-shadow-color);        /* a primary action while pressed */
  --turn-shadow-control: 3px 3px 0 var(--turn-shadow-color);
  --turn-shadow-action: 4px 4px 0 var(--turn-shadow-color);

  /* Surfaces: three elevation levels. Every hard shadow in TURN is one of press,
     control, action, card or dialog; the older design-tokens.css shadow names are
     aliases of these. Readouts (HUD chips, cards inside a dialog)
     share the control radius, border and shadow; cards and panels sit above them;
     dialogs sit above everything. */
  --turn-radius-card: 18px;
  --turn-border-card: 4px;
  --turn-shadow-card: 6px 6px 0 var(--turn-shadow-color);
  --turn-radius-dialog: 24px;
  --turn-border-dialog: 4px;
  --turn-shadow-dialog: 8px 8px 0 var(--turn-shadow-color);

  /* Motion: functional only. */
  --turn-motion-fast: 120ms;
  --turn-motion-base: 180ms;
  --turn-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --turn-motion-fast: 0ms;
    --turn-motion-base: 0ms;
  }
}

/* iOS Safari zooms the page into a focused text field set below 16px. Text entry
   renders at 16px or larger (checkboxes, radios, ranges and buttons are not text).
   Colour inputs count: iOS's colour picker types into its Sliders values with the
   keyboard, and then sizes the zoom from the focused colour input. */
:where(input:not([type="button"], [type="checkbox"], [type="file"], [type="hidden"], [type="image"], [type="radio"], [type="range"], [type="reset"], [type="submit"]), select, textarea) {
  font-size: max(16px, 1em) !important;
}