/* ---------------------------------------------------------------------------
   Coincide — the measurements every surface shares
   ---------------------------------------------------------------------------
   THIS FILE HAS NO COLOURS AND NO FONTS IN IT. On purpose.

   Coincide has three faces, and they are allowed to look like three different
   things:

       theme-landing.css   the front page — the shop window
       theme-guest.css     the event pages a guest books on
       theme-staff.css     the vendor's pages and the office — the tools

   Each of those files decides how its face LOOKS. This file decides how big
   things are, and every face shares it — because spacing, type scale and
   tap-target size are not taste, they are ergonomics. A thumb is the same size
   on all three.

   ⚠️ IF YOU ARE HERE TO CHANGE A COLOUR, YOU ARE IN THE WRONG FILE.
   Open the theme file for the face you want to change. Changing one theme
   cannot affect the other two — that is the whole point of the split.

   ---------------------------------------------------------------------------
   THE CONTRACT — what every theme file must define
   ---------------------------------------------------------------------------
   The structural stylesheets (site.css, app.css, landing.css) are written
   against these NAMES and never against a colour. So a theme is simply a file
   that provides all of them; get the list complete and any theme works on any
   surface, which is also how a per-client look would arrive later.

     Brand       --c-brand  --c-brand-strong  --c-accent
     Surfaces    --c-surface  --c-surface-raised  --c-surface-sunken
     Ink         --c-ink  --c-ink-muted  --c-ink-faint  --c-ink-inverse
     Lines       --c-line  --c-line-strong
     Status      --c-ok  --c-warn  --c-danger
                 --c-ok-wash  --c-warn-wash  --c-danger-wash
     Focus       --c-focus
     Backdrop    --c-backdrop
     Paper       --c-paper  --c-paper-ink  --c-paper-line   (printing)
     Depth       --shadow-1  --shadow-2
     Type        --font-display  --font-body  --font-mono

   Copy any existing theme file to start a new one; it is a complete list by
   construction.
--------------------------------------------------------------------------- */

:root {
  /* --- Type scale ------------------------------------------------------- */
  /* Fluid: each size grows with the viewport between a floor and a ceiling,
     so nothing needs a breakpoint to stay readable. The FAMILIES are a
     theme's business; these are the sizes. */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
  --step-0:  clamp(1rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2vw, 3.4rem);

  /* --- Space ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Shape ------------------------------------------------------------ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* How wide a column of text is allowed to get. Roughly 65 characters,
     which is where reading stops being comfortable. */
  --measure: 34rem;

  /* --- Touch ------------------------------------------------------------ */
  /* Nothing anybody has to press is smaller than this, on any surface. Most
     of them are on a phone, standing up, at an event — and the vendor is
     doing it one-handed with a queue in front of them. */
  --hit: 44px;
}