/* ==========================================================================
   WAIW — shared design tokens
   --------------------------------------------------------------------------
   Everything brand-level lives here (colours, type, spacing, radii).
   Sub-pages should import this file first, then their own styles.
   ========================================================================== */

:root {
  /* ---- Brand colours ---------------------------------------------------- */
  --c-red:        #E03341;  /* brand red */
  --c-red-deep:   #B0222E;  /* darker red for hover states */
  /* ONE RED. There is deliberately no lightened small-text variant.
     There used to be (--c-red-sm), used by five elements in the products
     section. It was removed because it read as a second, unexplained red
     sitting inches from brand-red eyebrows — the products section was the
     only place on the site it appeared.

     Know the trade you are inheriting. Measured on RENDERED PIXELS (not
     computed from the hex, which is meaningless here — the page-wide topo
     raster lifts the effective ground by enough to move a ratio 0.6), red
     text on the dark backdrop sits at roughly:

       13px eyebrows and indices   3.3-3.7:1     WCAG AA wants 4.5:1
       20.8px product taglines     3.6-3.7:1     WCAG AA wants 4.5:1
       19.6px BOLD (diagram key)   ~3.6:1        large text, wants 3:1  PASSES

     So ~40 red elements site-wide are below AA and always have been. That is
     a property of #E03341 on a dark ground, not of any one section, and no
     amount of weight or size fixes it below 18.66px. Two honest ways out if
     it ever needs fixing, both site-wide and neither of them local patches:
     lift the brand red itself, or stop setting small type in the accent and
     move the colour into marks and rules (which is what .ticks li::before and
     the phone diagram key already do). Do NOT reintroduce a second red for
     one component. */
  /* The diagram's second legend colour. Measured 9.04:1 on --c-ink, so it is
     safe for text at any size; used as the phone key's swatch fill. */
  --c-gold:       #FE9900;
  --c-charcoal:   #272727;  /* brand charcoal */

  /* Dark backgrounds — one continuous topographic backdrop runs page-wide */
  --c-ink:        #151515;  /* page base (behind the fixed topo backdrop)     */
  --c-carbon:     #1B1B1B;  /* kept for future sub-pages / raised blocks      */
  --c-deep:       #0F0F0F;  /* footer / deepest layer                         */
  --c-surface:    #202020;  /* cards & form surfaces on dark                  */
  --c-surface-2:  #242424;  /* hover / raised surface                         */

  /* Off-whites kept for future light sub-pages */
  --c-paper:      #F4F1EB;
  --c-paper-soft: #FFFFFF;
  --c-white:      #FFFFFF;

  /* ---- Text colours ------------------------------------------------------ */
  --t-on-dark:        rgba(255, 255, 255, 0.92);
  --t-on-dark-muted:  rgba(255, 255, 255, 0.60);
  --t-on-dark-faint:  rgba(255, 255, 255, 0.38);
  --t-on-light:       #1B1B1B;
  --t-on-light-muted: rgba(27, 27, 27, 0.66);
  --t-on-light-faint: rgba(27, 27, 27, 0.42);

  /* ---- Lines / borders --------------------------------------------------- */
  --line-on-dark:  rgba(255, 255, 255, 0.14);
  --line-on-light: rgba(27, 27, 27, 0.14);

  /* ---- Typography ---------------------------------------------------------
     TODO(fonts): the brand fonts are licensed —
       headings:  "TT Firs Neue"  (drop the .woff2 files into assets/fonts,
                  add @font-face rules here and put it first in --font-display)
       body:      "Proxima Nova"  (same, first in --font-body)
     Until then we ship close free fallbacks (Manrope / Inter). */
  --font-display: "Manrope", "TT Firs Neue", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Proxima Nova", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", "Consolas", monospace;

  /* Fluid type scale */
  --fs-hero:    clamp(4.5rem, 16vw, 13rem);      /* the WAIW wordmark line   */
  --fs-hero-2:  clamp(1.5rem, 4.2vw, 3.4rem);    /* hero second line         */
  --fs-h2:      clamp(2rem, 4.6vw, 3.6rem);      /* section titles           */
  --fs-h3:      clamp(1.5rem, 2.6vw, 2.2rem);    /* product names            */
  --fs-h4:      1.125rem;                        /* card titles              */
  --fs-lede:    clamp(1.05rem, 1.5vw, 1.3rem);   /* section intros           */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-mono:    0.8125rem;                       /* eyebrows, labels         */

  /* ---- Layout ------------------------------------------------------------ */
  --container:   72rem;      /* main content width  */
  --container-w: 82rem;      /* wide content width  */
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --sect-pad:    clamp(4.5rem, 10vw, 8.5rem);    /* vertical section padding */

  /* ---- Misc ---------------------------------------------------------------*/
  --radius:     14px;
  --radius-sm:  8px;
  --radius-pill: 999px;
  --shadow-card: 0 18px 50px -18px rgba(0, 0, 0, 0.28);
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --header-h:   4.5rem;
}