/* ============================================================================
   theme.css — the half of the design system that is not any one shop's.

   Split out of brand.css so that dressing a second shop is a colour file and a
   typeface, not a fork. The rule for deciding which file a token belongs in:

     theme.css   if changing it for a new shop would be a mistake.
                 The type scale, the spacing steps, the corner radii, the
                 minimum tap target. These are how the layout holds together;
                 a shop that wants 11px corners does not want them enough to
                 justify a second version of every rule that reads them.

     brand.css   if it is the shop's. Colour, and the display face. That is
                 genuinely all of it, which is the point.

   Load order is theme.css then the skin, because the skin's dark-scheme blocks
   override two shadows declared here. Custom properties resolve lazily, so the
   shadows below can refer to --sign-rgb from a file that has not loaded yet and
   still come out right.

   Nothing in here should ever need editing to launch a shop. If it does, that
   is a signal the split is in the wrong place, not a reason to edit it quietly.
   ========================================================================== */

:root {
  /* --- type ---------------------------------------------------------------
     The display face lives in the skin: it is the shop's own, and it is the
     one typographic decision that changes per site. These two do not change.
     The body face is the system sans on purpose — nothing on the page should
     wait on a font request, and every device already has this one. */
  --sans:       -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
  /* Tabular figures matter more than they sound: a column of times reading
     09:00 / 09:15 / 09:30 must not jitter as the digits change. */
  --numeric:    "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* --- type scale ---------------------------------------------------------
     A 1.25 ratio, and every heading clamps so it shrinks on a phone without a
     media query. Sizes are named for their job, not their pixels, so a display
     heading stays a display heading if the scale is ever retuned. */
  --t-display:  clamp(2.4rem, 7vw, 4rem);
  --t-title:    clamp(1.75rem, 4.5vw, 2.5rem);
  --t-section:  clamp(1.3rem, 3vw, 1.65rem);
  --t-lead:     clamp(1.02rem, 2vw, 1.15rem);
  --t-body:     1.0625rem;
  --t-small:    .9rem;
  --t-tiny:     .8rem;
  /* Uppercase labels need air between the letters or they read as a block. */
  --track-caps: .14em;

  /* --- spacing scale ------------------------------------------------------
     Everything is a step on this. Hand-picked one-off values are what makes a
     page feel almost-right without anyone being able to say why. */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;
  --s5: 24px;  --s6: 32px;  --s7: 48px;  --s8: 64px;  --s9: 96px;

  /* --- shape -------------------------------------------------------------- */
  --radius:     16px;
  --radius-sm:  10px;
  --radius-lg:  22px;
  --maxw:       1080px;
  --tap:        44px;      /* minimum touch target; barbers use this one-handed */

  /* --- shadow -------------------------------------------------------------
     Layered and low-opacity. One hard shadow reads as a sticker; two soft ones
     read as an object sitting on a surface.

     Tinted with the shop's own black through --sign-rgb rather than a flat
     grey, because a shadow cast in a warm palette and printed in neutral grey
     is the sort of thing nobody can name but everybody can see. That is the
     whole reason --sign-rgb exists in the skin: CSS cannot vary the alpha of a
     hex custom property, so the three-number form is what lets a shadow follow
     a brand colour it has never been told about.

     --shadow-md is deliberately not re-declared for dark mode. It ends up
     tinted with whatever black the skin uses there, which at five to nine per
     cent alpha is indistinguishable from the pure black the other two switch
     to, and one fewer duplicated line is worth more than that difference. */
  --shadow:     0 1px 2px rgba(var(--sign-rgb), .04), 0 6px 16px rgba(var(--sign-rgb), .06);
  --shadow-md:  0 2px 4px rgba(var(--sign-rgb), .05), 0 12px 28px rgba(var(--sign-rgb), .09);
  --shadow-lg:  0 4px 8px rgba(var(--sign-rgb), .06), 0 24px 60px rgba(var(--sign-rgb), .14);
}

/* --------------------------------------------------------------- motion ----
   Lives here rather than in the skin: honouring this is not a brand decision.
   Anyone who has asked their system to stop moving things has asked every
   shop we build, not just the ones whose palette we happened to like. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}