/* ==========================================================================
   Allutech Systems — design tokens
   "Edge of Glass": mist canvas, aluminium hairlines, graphite ink,
   and one accent — the aqua-green of a cut float-glass edge.
   Nothing but custom properties belongs in this file.
   ========================================================================== */

:root {
  /* ---- Colour ------------------------------------------------------- */
  --mist:      #ECEEED; /* page canvas — cool pale grey-green */
  --pane:      #FFFFFF; /* cards, surfaces */
  --ink:       #14181B; /* headings, deep graphite */
  --ink-60:    #5A6165; /* body text */
  --aluminium: #C3C8CA; /* hairlines, rules, borders — 1px, everywhere */
  --edge:      #21665B; /* THE accent: cut-edge glass green */
  --edge-tint: #D6E4DF; /* wash backgrounds, hover fills */
  --shadow:    0 1px 2px rgba(20, 24, 27, .04), 0 12px 32px rgba(20, 24, 27, .06);
  /* Cards use their own shadow: a cool cast down-right with a white lift
     up-left, so they read as raised rather than as dropped onto the page. */
  --shadow-card: rgba(136, 165, 191, .48) 6px 2px 16px 0,
                 rgba(255, 255, 255, .8) -6px -2px 16px 0;

  /* Derived, for the few places that need them. Nothing else may be invented. */
  --ink-12:    rgba(20, 24, 27, .12);
  --ink-06:    rgba(20, 24, 27, .06);
  --edge-deep: #17493F; /* :active / pressed state of --edge, and the footer */
  --stat-bg:   #F4F4F4; /* counter panel ground */
  /* Footer ground. Graphite rather than the deep green: the utility strip at
     the top of the page is already --edge, and closing on the same colour made
     the page read as green-topped-and-tailed with the work in between. Ink
     lets the green stay the accent it is meant to be. */
  --footer-bg: #171C20;
  /* Wash over the CTA photograph. Neutral deep ink rather than a green tint,
     so the image keeps its own colour and only loses brightness. */
  --cta-overlay: rgba(20, 24, 27, .70);
  --scrim:     linear-gradient(180deg, rgba(20, 24, 27, 0) 40%, rgba(20, 24, 27, .08) 100%);

  /* ---- Glass --------------------------------------------------------
     Frosted panes for content sitting over photography. Used in the hero
     only. This is the material the company sells, not decoration: a pale
     pane, a bright edge highlight, and one cut edge in --edge.
     A solid fallback is applied where backdrop-filter is unsupported.    */
  --glass:        rgba(255, 255, 255, .52);
  --glass-solid:  rgba(255, 255, 255, .88);
  --glass-edge:   rgba(255, 255, 255, .60);
  --glass-blur:   20px;
  --glass-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset,
                  0 18px 44px rgba(20, 24, 27, .10);

  /* Header glass — lighter blur than the panes, so type stays crisp behind it. */
  --header-glass: rgba(255, 255, 255, .74);
  --header-blur:  16px;

  /* ---- Pastel section washes ----------------------------------------
     Very low-chroma tints used to separate one section from the next.
     All four are desaturated towards the mist canvas so the page still
     reads as one cool, architectural surface rather than a colour block.
     Body text keeps > 7:1 contrast on every one of them.               */
  --wash-mint:  #E7EFEB; /* pulled from --edge */
  --wash-sky:   #E6EBEF; /* cool blue-grey */
  --wash-sand:  #F1EDE7; /* warm neutral */
  --wash-blush: #F1E9E9; /* pale rose */

  /* ---- Type --------------------------------------------------------- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Figures across the site — counters, step numbers, slide counts. Applied to
     numeric elements rather than globally, because a CSS font stack cannot
     target digits alone without self-hosting a unicode-range subset. */
  --font-num:     'Lato', 'Inter Tight', system-ui, sans-serif;

  /* One scale, stepped down about 18% from the original brief. At the old
     sizes a 54px h2 over 17px body left every section top-heavy; these keep
     the same relationships at a calmer overall weight. */
  --fs-display: clamp(2.6rem, 1.4rem + 3.4vw, 4rem);
  --fs-h2:      clamp(1.85rem, 1.25rem + 1.7vw, 2.7rem);
  --fs-h3:      1.1875rem;
  --fs-h4:      1rem;
  --fs-body:    clamp(.9375rem, .92rem + .07vw, 1rem);
  --fs-small:   .875rem;
  --fs-mono:    .6875rem;

  --lh-display: .98;
  --lh-head:    1.08;
  --lh-body:    1.65;

  --ls-display: -.02em;
  --ls-mono:    .08em;

  --wdth-display: 112; /* Archivo variable width axis */

  /* ---- Layout ------------------------------------------------------- */
  --container: 1320px;
  --gutter:    clamp(20px, 4vw, 56px);
  --col-gap:   clamp(16px, 1.8vw, 28px);
  /* Section rhythm. Tightened from the original 72–140px: at 140px top and
     bottom, consecutive sections were separated by 280px of nothing on a
     desktop viewport, which read as the page being broken rather than airy. */
  --section:   clamp(56px, 6.4vw, 104px);
  --stack:     clamp(22px, 2.6vw, 36px);

  /* ---- Shape -------------------------------------------------------- */
  --radius:      4px;
  --radius-pill: 999px;
  --hairline:    1px solid var(--aluminium);

  /* ---- Motion ------------------------------------------------------- */
  --ease-sash: cubic-bezier(.16, 1, .3, 1);
  --ease-out:  cubic-bezier(.22, .61, .36, 1);
  --dur-fast:  180ms;
  --dur-med:   380ms;
  --dur-sash:  620ms;

  /* ---- Depth -------------------------------------------------------- */
  --z-base:    1;
  --z-rail:    60;
  --z-header:  80;
  --z-drawer:  90;
  --z-toast:   100;

  /* ---- Focus -------------------------------------------------------- */
  --focus-ring: 2px solid var(--edge);
  --focus-offset: 3px;
}