/* ==========================================================================
   TOKENS — the structural scale
   --------------------------------------------------------------------------
   Everything here is the same on every site in the network. These are not
   brand values; they are the geometry the design system is built on, and a
   portal that changed them would break layout rather than rebrand it.

   Brand values live in the --ssp-* family and arrive from the SSP plugin or
   a child theme. This file references them but never defines them, with one
   exception noted below.
   ========================================================================== */

:root {

  /* ---- Fluid type scale --------------------------------------------------
     A 1.2 ratio at small sizes widening to 1.25 at large, interpolated
     between 360px and 1440px viewports. clamp() means no breakpoint ever
     has to restate a font size.                                          */

  /* Eyebrows and chip labels. The prototypes lean on .62-.66rem for these
     and the scale had no step that small, so every label was rendering a
     size too large. */
  --ss-step--3: clamp(0.62rem, 0.61rem + 0.07vw, 0.66rem);
  --ss-step--2: clamp(0.69rem, 0.67rem + 0.11vw, 0.76rem);
  --ss-step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.95rem);
  --ss-step-0:  clamp(1.00rem, 0.93rem + 0.33vw, 1.19rem);
  --ss-step-1:  clamp(1.20rem, 1.09rem + 0.52vw, 1.48rem);
  --ss-step-2:  clamp(1.44rem, 1.27rem + 0.79vw, 1.86rem);
  --ss-step-3:  clamp(1.73rem, 1.47rem + 1.17vw, 2.32rem);
  --ss-step-4:  clamp(2.07rem, 1.70rem + 1.71vw, 2.90rem);
  --ss-step-5:  clamp(2.49rem, 1.95rem + 2.45vw, 3.63rem);
  --ss-step-6:  clamp(2.99rem, 2.22rem + 3.47vw, 4.54rem);

  /* ---- Line height and tracking ------------------------------------------
     Display type is set tight and tracked out; body type is set loose and
     tracked normal. Holding these as tokens is what stopped the specimen
     work drifting between pages.                                          */

  --ss-leading-tight: 0.92;
  --ss-leading-snug:  1.15;
  --ss-leading-body:  1.6;
  --ss-leading-loose: 1.75;

  --ss-tracking-display: 0.02em;
  --ss-tracking-label:   0.14em;

  /* The Suresafe plus-and-grid motif, as a mask so it takes any colour from
     currentColor. Extracted from the prototypes — the theme had been faking
     it with CSS gradients at 6%, which is not the same mark. */
  --ss-mesh: url("../img/mesh.svg");   /* the prototypes' mode, not 0.12 */
  --ss-tracking-body:    0;

  /* ---- Spacing scale ----------------------------------------------------
     Fluid, on the same viewport range as the type, so vertical rhythm and
     type scale move together.                                            */

  --ss-space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --ss-space-2xs: clamp(0.50rem, 0.48rem + 0.11vw, 0.56rem);
  --ss-space-xs:  clamp(0.75rem, 0.71rem + 0.16vw, 0.88rem);
  --ss-space-s:   clamp(1.00rem, 0.95rem + 0.22vw, 1.13rem);
  --ss-space-m:   clamp(1.50rem, 1.43rem + 0.33vw, 1.69rem);
  --ss-space-l:   clamp(2.00rem, 1.90rem + 0.43vw, 2.25rem);
  --ss-space-xl:  clamp(3.00rem, 2.85rem + 0.65vw, 3.38rem);
  --ss-space-2xl: clamp(4.00rem, 3.80rem + 0.87vw, 4.50rem);
  --ss-space-3xl: clamp(6.00rem, 5.70rem + 1.30vw, 6.75rem);

  /* ---- Measure and shell ------------------------------------------------ */

  --ss-measure:      68ch;   /* comfortable reading width */
  --ss-shell-max:    1440px;
  --ss-shell-gutter: clamp(1rem, 0.5rem + 2.5vw, 3rem);

  /* ---- Motion ----------------------------------------------------------- */

  --ss-duration-fast: 120ms;
  --ss-duration:      200ms;
  --ss-duration-slow: 400ms;
  --ss-ease:          cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Elevation --------------------------------------------------------
     Expressed through the line token rather than a shadow colour, so a
     portal on a dark ground does not inherit a black shadow.             */

  --ss-shadow-1: 0 1px 2px color-mix(in srgb, var(--ssp-ink) 12%, transparent);
  --ss-shadow-2: 0 4px 16px color-mix(in srgb, var(--ssp-ink) 14%, transparent);

  /* ---- Layering --------------------------------------------------------- */

  --ss-z-base:    0;
  --ss-z-raised:  10;
  --ss-z-sticky:  100;
  --ss-z-header:  200;
  --ss-z-overlay: 300;
  --ss-z-modal:   400;

  /* ---- Derived brand values --------------------------------------------
     These are the one permitted place where the theme computes from a
     brand token, because the relationship is structural rather than a
     design choice: a hover state is always a shade of the accent, on
     every site, and asking 125 portals to define it separately would
     guarantee inconsistency.                                             */

  --ss-accent-hover:  color-mix(in srgb, var(--ssp-accent) 85%, black);
  --ss-accent-quiet:  color-mix(in srgb, var(--ssp-accent) 10%, var(--ssp-surface));
  --ss-line-strong:   color-mix(in srgb, var(--ssp-line) 60%, var(--ssp-ink));
}

/* Respect a stated preference for less motion. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ss-duration-fast: 1ms;
    --ss-duration:      1ms;
    --ss-duration-slow: 1ms;
  }
}