/* ============================================================
   German Power Solutions — Design Tokens
   Palette per GPS-Color-Palette-and-Tagline (01/09/2026).
   Only these four brand colours plus the listed neutrals.
   ============================================================ */
:root {
  /* ---- Brand palette (the German flag, flat) ---- */
  --gps-black:#111111;
  --gps-red:#dd0000;
  --gps-yellow:#ffce00;
  --gps-white:#ffffff;

  /* ---- Supporting neutrals (not official palette colours) ---- */
  --ink:#000000;          /* reserved: maximum-contrast text      */
  --grey-100:#f2f2f2;     /* cards, panels                        */
  --grey-300:#cccccc;     /* hairlines, dividers, card borders    */
  /* --grey-600 is a functional addition, not a brand colour. The deck
     lists no mid grey, and secondary body text needs one: --grey-300 on
     white is 1.61:1 and fails WCAG outright. 6.44:1 on white — AA. */
  --grey-600:#5a5f66;

  /* ---- Approved contrast pairings (deck, slide 2) ----
     Ratios recomputed from the literal token values above with the
     WCAG 2.x relative-luminance formula. An earlier revision of this
     table quoted figures for #101010; --gps-black is #111111, so every
     black pairing was a shade optimistic.
       white  on red     5.15:1   AA
       yellow on red     3.46:1   large text only (>=3:1); fails body text
       white  on black  18.88:1   AAA
       yellow on black  12.66:1   AAA
       black  on yellow 12.66:1   AAA
       red    on white   5.15:1   AA
     NEVER yellow text on white (1.49:1). Red text on black is 3.66:1 --
     large-text-only at best, and the palette has yellow for that job, so
     treat it as forbidden for text too. */

  /* ---- Typography ----
     Lato, to match the reference site, which sets its whole page in it
     under the alias custom-lato. This overrides slide 4 of the brand
     deck, which names Roboto; the client chose the reference match.
     Swapping back is this block plus assets/css/fonts.css plus the two
     preload lists (build.sh and wp/gps-theme/inc/enqueue.php). */
  --font-head:"Lato","Helvetica Neue",Arial,sans-serif;
  --font-body:"Lato","Helvetica Neue",Arial,sans-serif;

  /* Lato has no 500 and no 600 face -- the family runs 100, 300, 400,
     700, 900. A rule asking for 500 does not get a medium: CSS font
     matching walks DOWN to 400 and renders regular. So --fw-med is 400
     and says so, rather than being a 500 that silently resolves to the
     same place. Anything that genuinely needs to sit above body copy
     has to take --fw-bold; there is no half step in this typeface.
     The five font-weight:600 sites in header.css and parts.css round
     the other way, up to 700, exactly as they did under Roboto. */
  --fw-black:900; --fw-bold:700; --fw-med:400; --fw-reg:400;

  --fs-xs:.75rem;  --fs-sm:.875rem; --fs-base:1.0625rem; --fs-lg:1.1875rem;
  --fs-xl:1.375rem;--fs-2xl:1.75rem;--fs-3xl:2.25rem;    --fs-4xl:3rem;
  --fs-5xl:4rem;   --fs-6xl:5rem;

  /* Optical tracking. Large type needs negative tracking to stop it
     looking loose; small uppercase labels need positive tracking to
     stop it looking cramped. The reference runs -0.03em on its 36px
     section heads and -0.02em on its 20px card titles. */
  --tr-tight:-.03em;      /* display & section headings   */
  --tr-snug:-.02em;       /* card titles, sub-heads       */
  --tr-normal:0;          /* body copy                    */
  --tr-wide:.1em;         /* buttons                      */
  --tr-caps:.22em;        /* small uppercase eyebrows     */

  --lh-display:1.06; --lh-head:1.18; --lh-body:1.7;

  /* ---- Spacing (8pt) ---- */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;  --sp-5:1.5rem;
  --sp-6:2rem;   --sp-7:2.5rem;--sp-8:3rem;   --sp-9:4rem;  --sp-10:5rem;

  /* ---- Layout ---- */
  --container:1320px;
  --container-pad:clamp(1.25rem,4vw,3rem);

  /* Flat brand: sharp corners are the default. Radius only where the
     deck uses it (cards 25px, panels 20px, cover bands 40px). The
     6px tile radius below is the product-card exception, matched to
     the reference grid. */
  --radius-0:0;
  --radius-tile:6px;
  --radius-panel:20px;
  --radius-card:25px;

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur-fast:160ms; --dur:280ms; --dur-slow:600ms;
  --hero-autoplay:6000ms;

  /* ---- Scroll reveal ----
     Three knobs, published here so one wp_add_inline_style() call can retune
     every band from the Customizer without a style attribute per tile.

     Rise is in rem, not px, so it scales with a raised browser text size.
     Duration is its own token because --dur (280ms) is tuned for hover and
     reads as a flicker on a scroll reveal, while --dur-slow (600ms) is
     already claimed by the promo artwork scale and feels sluggish when
     fifteen tiles run it in sequence. Easing is deliberately NOT a new
     token: --ease is a front-loaded decelerating curve, which is the right
     shape for something arriving and settling. */
  --reveal-rise:1.25rem;
  --reveal-dur:520ms;
  --reveal-step:55ms;

  /* ---- Hero ----
     Sized against the reference, which runs a 1920x540 band: 401px
     tall in a 1440x900 window, about 45% of the viewport. Ours holds
     live HTML copy rather than baked-in banner text, so it needs a
     little more room than that -- but far less than a full screen. */
  --hero-ratio:3.5555;                 /* 1920 x 540 */
  --hero-min-h:clamp(24rem,62vw,29rem);
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}