/* tokens.css - the design tokens the real site (index.html) and the countdown page (teaser/index.html) share,
   so the two can never drift apart. Published in BOTH site modes (scripts/build-public.js SHARED_FILES), served under
   /owner/ like brand.js (netlify/functions/owner.js STATIC_FILES + netlify.toml included_files). Nothing of the real
   site is in here: only the numbers that define the shape of the UI.

   THREE RULES, applied everywhere (2026-10-01 - "a systematic design: one value, adapted when shapes are in shapes"):

   1. ONE CORNER RADIUS. --radius is the radius of every outermost rounded shape. Circles (50%) are the only other
      value. Nothing in the CSS may hard-code a radius in px.

   2. CONCENTRIC CORNERS. A shape inside another rounded shape does not reuse the outer radius: OUTER radius = INNER
      radius + the distance between the two edges (padding + border). So the inner radius is derived, never typed:
          inner = outer - padding - border
      --radius-nest is the inner radius for the standard tight inset (4px padding + 1px border) - what a button inside
      a pill, an option inside a menu or an icon inside a toolbar uses. A bigger inset gets its own derived value
      (--radius-nest-2: 8px padding), floored so a corner never goes square. A shape 16px or more inside a corner
      is far enough from it to keep --radius.

   3. THE 8PT SCALE (https://medium.com/@kingsleyifeanyi86/margin-padding-in-ui-design-f9a78eec74a6 and the usual
      "internal <= external" rule). Every padding, margin and gap is one of the --space-* values below: multiples of 8,
      with 4 as the half step for tight insets. Spacing under 4px is an optical nudge (aligning an icon with text), not
      layout, and may stay a literal. And the nesting rule: OUTER SPACING >= INNER SPACING - the deeper you go into
      groups, the smaller the space gets: a window's padding >= the gap between its sections >= the gap inside a
      section >= the padding of a control. */
:root {
  /* spacing: --space-N = N x 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  --border: 1px;                 /* the one border width of the UI */

  /* the corner radius: 8px made 30% rounder (2026-10-01) */
  --radius: 10.4px;
  --radius-nest: calc(var(--radius) - var(--space-1) - var(--border));                     /* 4px padding + 1px border -> 5.4px */
  --radius-nest-2: max(2px, calc(var(--radius) - var(--space-2) - var(--border)));         /* 8px padding + 1px border -> 2px (floored) */
  --radius-inner: var(--radius-nest);   /* old name, kept: checkboxes / stepper buttons */
}