/* ===========================================================================
   Design tokens.

   This is the file to edit when reshaping the look of the whole application.
   Nothing below this layer hard-codes a colour, a radius or a font size --
   every component reads from these variables, so a new palette is roughly
   thirty lines rather than a search through every stylesheet.

   Colour is not here -- see palettes.css. Splitting them means a new colour
   direction never risks disturbing spacing or type, and the two can be
   iterated on independently.
   =========================================================================== */

:root {
    color-scheme: light dark;

    /* Colour lives in palettes.css. This file owns structure only: type,
       space, shape and motion. A palette swaps every colour without a single
       component rule changing. */

    /* --- Type -------------------------------------------------------------- */
    --font-ui:       "Archivo", ui-sans-serif, system-ui, sans-serif;
    --font-label:    "Archivo Narrow", "Archivo", ui-sans-serif, sans-serif;

    --step--1:       0.78rem;
    --step-0:        0.94rem;
    --step-1:        1.16rem;
    --step-2:        1.55rem;
    --step-3:        2.2rem;

    --tracking-label: 0.12em;   /* room names, eyebrows */
    --tracking-tight: -0.01em;  /* headings */

    /* --- Space: a 4px base, named by use not by number -------------------- */
    --gap-hair:      2px;
    --gap-tight:     8px;
    --gap:           14px;
    --gap-wide:      24px;
    --gap-section:   52px;

    /* --- Shape -------------------------------------------------------------- */
    --radius-tile:   12px;
    --radius-control: 9px;
    --radius-pill:   999px;

    /* --- Depth: windows are recessed, controls are flush ------------------ */
    --recess: inset 0 1px 2px #00000026, inset 0 -1px 0 #FFFFFF33;
    --lift:   0 1px 0 #FFFFFF40, 0 2px 6px #00000014;

    /* --- Motion: mechanical, never bouncy --------------------------------- */
    --travel:     620ms cubic-bezier(0.32, 0.06, 0.24, 1);
    --tap:        140ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --travel: 1ms linear;
        --tap: 1ms linear;
    }
}