/* ===========================================================================
   VGS Group — design tokens
   Sourced from "VGS Group Brand Guidelines / VER 1.0 - 2026".
   Tints are the brand's stated percentages resolved against white.
   =========================================================================== */

:root {
  /* --- Primary palette (brand book p.27) ------------------------------- */
  --vgs-charcoal:      #2e323b;
  --vgs-black:         #090a0c;
  --vgs-silver:        #b5bdc7;
  --vgs-snow:          #eef2f7;

  /* --- Tint ramps ------------------------------------------------------ */
  --vgs-charcoal-75:   #62656c;
  --vgs-charcoal-50:   #97999d;
  --vgs-charcoal-25:   #cbccce;

  --vgs-silver-75:     #c8ced5;
  --vgs-silver-50:     #dadee3;
  --vgs-silver-25:     #edeff1;

  /* --- Semantic roles -------------------------------------------------- */
  --surface:           var(--vgs-snow);
  --surface-raised:    #ffffff;
  --surface-inverse:   var(--vgs-charcoal);
  --surface-deep:      var(--vgs-black);

  --text:              var(--vgs-charcoal);
  --text-muted:        var(--vgs-charcoal-75);
  --text-inverse:      var(--vgs-snow);
  --text-inverse-muted: var(--vgs-silver);

  --border:            var(--vgs-silver);
  --border-subtle:     var(--vgs-silver-50);
  /* Form errors only. The brand has no red; this one clears 7:1 on snow. */
  --error:             #9b1c1c;

  /* Focus ring. The brand has no accent colour, so focus is expressed with
     weight and offset rather than hue — it must still clear 3:1 against both
     the snow and charcoal grounds. */
  --focus-ring:        var(--vgs-charcoal);
  --focus-ring-inverse: var(--vgs-snow);

  /* --- Typography ------------------------------------------------------
     Eurostile (display) and Acumin Pro (body) are licensed faces not yet
     cleared for web use. These stacks are deliberately indirected so the
     real faces drop in by editing these two lines only. */
  /* Adobe Fonts declares these as "eurostile" and "acumin-pro". The names must
     match the kit exactly — "Acumin Pro" with a space matches nothing. */
  --font-display: "eurostile", "Saira", system-ui, sans-serif;
  --font-body:    "acumin-pro", "Source Sans 3", system-ui, sans-serif;

  --tracking-display: 0.01em;
  --tracking-caps:    0.08em;

  /* Fluid type scale — 320px to 1440px viewport */
  --step--2: clamp(0.72rem, 0.70rem + 0.11vw, 0.80rem);
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.11rem + 0.44vw, 1.50rem);
  --step-2:  clamp(1.44rem, 1.29rem + 0.75vw, 2.00rem);
  --step-3:  clamp(1.73rem, 1.49rem + 1.20vw, 2.66rem);
  --step-4:  clamp(2.07rem, 1.71rem + 1.82vw, 3.55rem);
  --step-5:  clamp(2.49rem, 1.94rem + 2.72vw, 4.74rem);

  /* --- Spacing --------------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 7rem;

  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout ---------------------------------------------------------- */
  --measure:      68ch;
  --container:    82.5rem;  /* 1320px */
  --container-narrow: 52rem;
  --gutter:       clamp(1rem, 0.5rem + 2.5vw, 2.5rem);

  --header-h:     6rem;
  /* The header's hairline sits outside --header-h, so anything pulling itself up
     under the header has to clear both or it leaves a sliver of page ground. */
  --header-border: 1px;
  /* The bar is pinned to this height rather than sized by its contents, so the
     hero can subtract a value that is right from the first paint. It used to be
     a fallback that header.js corrected on load, and the 3-4px correction
     resized the hero and jolted the page under it. */
  --top-bar-h:    3rem;

  /* --- Polygon system (brand book p.13) --------------------------------
     The brand's polygon holds 45deg acute and 135deg obtuse angles. Skew is
     used rather than clip-path because it holds the angle exactly at any
     size, where a percentage clip-path does not. */
  --poly-angle:   -45deg;
  --poly-skew:    skewX(var(--poly-angle));
  /* The mirror image, for the wipes that run the other way. */
  --poly-skew-reverse: skewX(calc(-1 * var(--poly-angle)));

  /* --- Motion ---------------------------------------------------------- */
  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:     150ms;
  --dur:          300ms;
  --dur-slow:     600ms;

  /* Corner radius. Kept small: the identity is built on hard 45deg angles,
     so anything softer than this starts to argue with the polygon system. */
  --radius:       0.375rem;

  --shadow-sm:    0 1px 2px rgba(9, 10, 12, 0.06), 0 2px 8px rgba(9, 10, 12, 0.06);
  --shadow-md:    0 4px 12px rgba(9, 10, 12, 0.10), 0 12px 32px rgba(9, 10, 12, 0.12);
  --shadow-lg:    0 8px 24px rgba(9, 10, 12, 0.14), 0 24px 64px rgba(9, 10, 12, 0.18);
}

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