/* ==========================================================================
   tokens.css — the design system's raw values. EDIT HERE FIRST.
   --------------------------------------------------------------------------
   Every colour, size, space, radius and duration used by the site lives in
   this file. Components only reference tokens, so a client request such as
   "a warmer red" or "bigger headings" is a one-line change here.

   Three layers:
     1. Brand palette   — named after things in the product's own world
                          (steel chassis, anthracite frames, roof tiles…).
     2. Semantic roles  — what a colour is FOR (text, surface, accent…).
                          Components use these, never the palette directly.
     3. Scales          — type, space, radius, motion, layout.

   Dark surfaces (header, hero, footer, CTA band…) do not need their own
   component rules: the `.surface-dark` class re-points the semantic tokens,
   and every component inside simply follows. See base.css.

   Contrast (WCAG 2.2 AA) of the pairs actually used — computed, not guessed:
     ink        #1a1d20 on paper #ffffff   16.9:1
     muted      #535a60 on paper            7.0:1 · on panel #f2f2ef 6.2:1
     roof red   #d0151d on paper            5.5:1 · on panel 4.9:1
     white      on roof red                 5.5:1 · on roof-deep 7.7:1
     olive      #2e7a31 on paper            5.3:1
     inverse    #f4f5f3 on chassis #16191c 16.1:1
     inv-muted  #b3bbc1 on chassis          9.1:1 · on anthracite 7.3:1
     red-light  #ff6166 on chassis          6.0:1 · on anthracite 4.8:1
     focus      #0b57d0 on paper 6.4:1 · dark focus #8ab4f8 on chassis 8.4:1
   Roof red on chassis is only 3.2:1 — enough for a button's shape (UI 3:1),
   never for text. Red text on dark always uses --dark-accent-text.
   ========================================================================== */

:root {
  /* ---- 1. Brand palette ------------------------------------------------ */
  --c-chassis:     #16191c;  /* steel chassis — darkest surface            */
  --c-anthracite:  #262c31;  /* RAL 7016-like window frames               */
  --c-steel:       #3a4248;  /* rules and borders on dark                 */
  --c-concrete:    #8a939a;  /* technical drawing lines                   */
  --c-panel:       #f2f2ef;  /* sandwich-panel off-white — alt surface    */
  --c-paper:       #ffffff;
  --c-roof:        #d0151d;  /* the logo's roof red — the one accent      */
  --c-roof-deep:   #a80f16;  /* hover / pressed                           */
  --c-roof-light:  #ff6166;  /* red that stays legible on dark surfaces   */
  --c-olive:       #2e7a31;  /* the logo's green arc — ticks, "yes"       */
  --c-olive-light: #6cc870;

  /* ---- 2. Semantic roles (light surface defaults) ---------------------- */
  --color-bg:            var(--c-paper);
  --color-bg-alt:        var(--c-panel);
  --color-surface:       var(--c-paper);    /* cards on either bg         */
  --color-text:          #1a1d20;
  --color-text-muted:    #535a60;
  --color-heading:       #121517;
  --color-accent:        var(--c-roof);
  --color-accent-hover:  var(--c-roof-deep);
  --color-accent-text:   var(--c-roof);     /* red used AS text           */
  --color-positive:      var(--c-olive);
  --color-line:          #d8dbd8;
  --color-line-strong:   #b9bebb;
  --color-drawing:       #59636b;           /* SVG elevation strokes      */
  --color-focus:         #0b57d0;           /* 3px ring, 7:1 on paper     */
  --color-scrim:         rgba(14, 16, 18, 0.72);
  --color-on-accent:     #ffffff;

  /* Dark-surface values — applied by .surface-dark (base.css)          */
  --dark-bg:             var(--c-chassis);
  --dark-bg-alt:         var(--c-anthracite);
  --dark-text:           #f4f5f3;
  --dark-text-muted:     #b3bbc1;
  --dark-heading:        #ffffff;
  --dark-line:           rgba(255, 255, 255, 0.14);
  --dark-line-strong:    rgba(255, 255, 255, 0.32);
  --dark-accent-text:    var(--c-roof-light);
  --dark-drawing:        #c6ccd1;
  --dark-focus:          #8ab4f8;
  /* Large display type only (≥ 24px bold): brighter logo red, 4.2:1 on
     chassis — passes AA for large text (3:1), not for body text. */
  --dark-display-accent: #f0262e;

  /* ---- 3a. Typography --------------------------------------------------- */
  --font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* Width axis: the whole personality of the type system. */
  --wdth-display: 75%;
  --wdth-heading: 80%;
  --wdth-label:   88%;
  --wdth-body:    100%;

  --weight-body:    400;
  --weight-medium:  500;
  --weight-strong:  600;
  --weight-heading: 700;
  --weight-display: 750;

  /* Fluid scale, 360px → 1440px viewport. */
  --step--2: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem);
  --step--1: clamp(0.8438rem, 0.82rem + 0.12vw, 0.9375rem);
  --step-0:  clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --step-1:  clamp(1.15rem, 1.07rem + 0.37vw, 1.4rem);
  --step-2:  clamp(1.4rem, 1.24rem + 0.74vw, 1.9rem);
  --step-3:  clamp(1.75rem, 1.44rem + 1.39vw, 2.7rem);
  --step-4:  clamp(2.15rem, 1.6rem + 2.45vw, 3.8rem);
  --step-5:  clamp(2.6rem, 1.7rem + 4vw, 5.3rem);
  --step-6:  clamp(3rem, 1.6rem + 6.2vw, 7.2rem);

  --leading-tight: 0.98;
  --leading-heading: 1.08;
  --leading-body: 1.62;
  --tracking-display: -0.012em;
  --tracking-label: 0.035em;
  --measure: 66ch;

  /* ---- 3b. Space -------------------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.48rem + 0.09vw, 0.5625rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.19vw, 0.875rem);
  --space-s:   clamp(1rem, 0.94rem + 0.28vw, 1.1875rem);
  --space-m:   clamp(1.5rem, 1.41rem + 0.37vw, 1.75rem);
  --space-l:   clamp(2rem, 1.81rem + 0.83vw, 2.5625rem);
  --space-xl:  clamp(3rem, 2.72rem + 1.2vw, 3.8125rem);
  --space-2xl: clamp(4rem, 3.44rem + 2.5vw, 5.6875rem);
  --space-3xl: clamp(5rem, 3.9rem + 4.9vw, 8.3rem);
  --section-pad: var(--space-3xl);

  /* ---- 3c. Shape & depth ----------------------------------------------- */
  /* The product is a steel box: corners stay nearly square. */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-line);
  --shadow-sm: 0 1px 2px rgba(16, 18, 20, 0.08);
  --shadow-md: 0 10px 30px -12px rgba(16, 18, 20, 0.28);
  --shadow-lg: 0 30px 60px -25px rgba(16, 18, 20, 0.45);
  /* The diagonal cut from the brand's business card and flyer. */
  --slant: 9%;

  /* ---- 3d. Layout -------------------------------------------------------- */
  --container: 82.5rem;           /* 1320px                               */
  --container-narrow: 48rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --header-h: 4.5rem;
  --tap: 2.75rem;                 /* 44px minimum target                  */

  /* ---- 3e. Motion (animations.js reads these back) ---------------------- */
  --dur-fast: 180ms;
  --dur-base: 420ms;
  --dur-slow: 900ms;
  --dur-reveal: 1000ms;
  --stagger: 90ms;
  --ease-out: cubic-bezier(0.2, 0.75, 0.15, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* ---- 3f. Layers -------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 50;
  --z-header: 100;
  --z-dialog: 200;
  --z-skip: 300;
}

@media (max-width: 47.99em) {
  :root { --header-h: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-reveal: 1ms;
    --stagger: 0ms;
  }
}