/* theme.css — STRUCTURAL tokens only: type, spacing, radius, sizes. No colours live here.
   Colours are in theme-cyan.css, which is the ONLY CheckIt-specific stylesheet. That separation is
   what let ScanIt drop a new skin onto LinkIt's component library without forking it — keep it.

   ⚠️ Three deliberate departures from LinkIt's numbers, all for outdoor one-handed use (Maya §2.3):
     1. 16px body, not 15px. In sunlight at arm's length 15px is a squint — and 16px is also the iOS
        floor that stops inputs zooming the page on focus.
     2. 44px minimum for every interactive control, 64px for a tick row. LinkIt's .btn is ~34px.
        That's a desk size.
     3. The tick box gets a 2px border in --ink-faint, never the --line hairline. --line is designed
        for a calm desktop canvas; in sunlight it disappears, and an unticked checkbox you can't see
        is a broken app. (The rule is here; the colour token is in the skin.)
*/

:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: var(--font-ui);

  --font-size-base: 1rem;       /* 16px — see note 1 */
  --font-size-lg:   1.125rem;
  --font-size-h1:   1.6rem;
  --font-size-h2:   1.15rem;
  --font-size-sm:   0.875rem;
  --font-size-xsm:  0.75rem;
  --line-height: 1.5;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 22px; --sp-6: 32px;
  --r-sm: 6px; --r-md: 9px; --r-lg: 14px;

  --button-height: 44px;        /* 44 is the glove floor — see note 2 */
  --button-height-sm: 36px;     /* header pills only — never a control you use one-handed outdoors */
  --input-height: 44px;
  --tabbar-height: 56px;
  --header-height: 56px;        /* .app-header AND .run-head — group heads stick directly under it */
  --head-bar-height: 52px;      /* .page-head AND .run-head-bar — the bars that sit UNDER the app
                                   header. .editor-head REPLACES the header on phone, so it keeps
                                   its own taller box below (Maya §5). One number, two bars. */
  --overlay-top: 8vh;           /* THE top offset for every top-anchored dialog. One number, one
                                   place: modals are top-anchored, never vertically centred, and
                                   nothing may hard-code its own offset (Shaun's standing rule). */
  --editor-head-height: 61px;   /* .editor-head — 44px controls + 8px above/below + its 1px rule */
  --editor-strip-height: 34px;  /* the "editing → v02" strip, when it rides inside .editor-head */
  --tick-row-height: 64px;      /* the load-bearing size in this app */
  --tick-box: 28px;
  --tick-box-border: 2px;       /* see note 3 */
  --row-note-zone: 52px;        /* the note button at the row's right edge */
  --start-btn: 56px;            /* the [▶] on a template row: cold start to ticking is two taps */
  --content-max: 1000px;
  --run-max: 720px;             /* the run list never stretches wider than this */
  --sidenav-width: 190px;

  --transition: .16s ease;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}