/* =====================================================================
   NORTHERN EDGE — tokens
   Every value that could change twice lives here. No hard-coded hex or px
   in the files that follow, except optical one-offs with a comment.
   ===================================================================== */

:root {
  /* --------------------------------------------------------- SURFACES
     Three dark depths, not one. Every dark section must show at least two
     of them, otherwise it reads as flat black and flat equals cheap. */
  --ne-ink: #0b0b0c;        /* page ground */
  --ne-graphite: #15171a;   /* raised plates, panels */
  --ne-steel: #22262b;      /* hairlines, insets, borders */
  --ne-concrete: #f3f2ef;   /* the one light surface */
  --ne-white: #ffffff;

  /* Action + accent */
  --ne-amber: #f5a623;
  --ne-amber-hi: #ffb627;
  /* The accent for light surfaces. The previous value (#c97f12) was
     commented as the tone that passes on concrete and did not: 2.87:1
     against #f3f2ef, short of 4.5:1 for the 11px eyebrows and small
     uppercase labels that use it, and short even of the 3:1 large-text
     floor. This is the lightest bronze in the same family that clears
     4.5:1 (measured 4.94:1 on concrete, 5.53:1 on white). */
  --ne-amber-deep: #945c0c;

  /* Secondary text */
  --ne-mute: #8a9099;       /* on dark */
  --ne-mute-ink: #5b6169;   /* on light */

  /* Error state. The bright pair is for dark surfaces; --ne-error-ink is the
     one that passes on white (5.44:1 against #ffffff, where #e0563f manages
     only 3.77:1 and fails for 13px message text). */
  --ne-error: #e0563f;
  --ne-error-hi: #ff8a72;
  --ne-error-ink: #c0392b;

  /* ------------------------------------------------- CONTRAST CONTRACT
     Four properties that every surface class rebinds. A component reads
     these instead of naming a colour, so it can be written once and drop
     onto ink, graphite, concrete or amber and still be legible. This is
     what replaces the per-surface override for every text role.

     Defaults describe the body, which is ink. */
  --ne-fg: var(--ne-white);        /* primary text */
  --ne-fg-soft: var(--ne-mute);    /* secondary text */
  --ne-rule: var(--ne-steel);      /* hairlines and borders */
  --ne-accent: var(--ne-amber);    /* the accent that passes here */

  /* ------------------------------------------------------- TYPE FACES
     Display is now the logo's face. The supplied wordmark is a squared,
     chamfered industrial sans; Chakra Petch carries the same cut corners
     and octagonal bowls, so headings and the logo finally speak once.
     It doubles as the utility face — the separation is carried by size,
     weight and tracking rather than by a third download. */
  --ne-font-display: "Chakra Petch", "Rajdhani", system-ui, sans-serif;
  --ne-font-utility: "Chakra Petch", system-ui, sans-serif;
  --ne-font-body: "Manrope", system-ui, sans-serif;

  /* ------------------------------------------------------- TYPE SCALE
     Deliberately much larger than the previous build, where the H2s read
     as H4s on a 1440 screen. The rule of thumb: if a heading looks
     comfortable, it is too small. */
  /* The page heading is the biggest thing on the page and the section
     headings sit clearly below it. They used to be the wrong way round —
     h2 topped out at 4rem against the hero's 3.8rem — which is why every
     section head competed with the page title instead of ranking under it.
     The step is now roughly 1.5x hero to h2, and 1.35x h2 to h3. */
  --ne-fs-hero: clamp(2.3rem, 4.6vw, 3.8rem);
  --ne-fs-h2: clamp(1.75rem, 3.6vw, 2.875rem);
  --ne-fs-h3: clamp(1.25rem, 1.9vw, 1.75rem);
  --ne-fs-h4: clamp(1.0625rem, 1.4vw, 1.25rem);
  --ne-fs-lead: clamp(1.0625rem, 1.25vw, 1.1875rem);
  --ne-fs-body: 1rem;
  --ne-fs-small: 0.875rem;
  --ne-fs-label: 0.6875rem;   /* 11px — utility labels, eyebrows */
  --ne-fs-nav: 0.8125rem;     /* 13px — nav and buttons */

  /* Oversized figures. These are page furniture, not text. */
  --ne-fs-numeral: clamp(6rem, 14vw, 11rem);
  --ne-fs-tonnage: clamp(4rem, 9vw, 7.5rem);
  --ne-fs-tel: clamp(2rem, 4vw, 3.2rem);

  /* Leading. Uppercase display type has no descenders, so it can run
     tight — but not so tight that a wrapped heading crushes, which is
     what 0.92 did in the previous build. */
  --ne-lh-display: 0.98;
  --ne-lh-heading: 1.04;
  --ne-lh-body: 1.65;

  /* Tracking. Big uppercase wants negative, small uppercase wants wide. */
  --ne-ls-display: -0.02em;
  --ne-ls-heading: -0.01em;
  --ne-ls-label: 0.14em;
  --ne-ls-nav: 0.12em;

  /* --------------------------------------------------------- SPACING */
  --ne-space-1: 4px;
  --ne-space-2: 8px;
  --ne-space-3: 12px;
  --ne-space-4: 16px;
  --ne-space-5: 24px;
  --ne-space-6: 32px;
  --ne-space-7: 48px;
  --ne-space-8: 64px;
  --ne-space-9: 96px;
  --ne-space-10: 128px;
  --ne-space-11: 160px;

  /* ------------------------------------------------------- STRUCTURE */
  --ne-section-y: clamp(80px, 9.5vw, 168px);
  --ne-wrap: 1320px;
  --ne-measure: 62ch;

  /* Diagonal seam. In vw so the angle stays constant at every viewport.
     Used on three boundaries per page, never on all of them. */
  --ne-cut: 2.4vw;

  --ne-hazard-h: 3px;
  --ne-topbar-h: 40px;
  --ne-header-h: 80px;
  --ne-header-h-docked: 64px;
  --ne-rail-w: 44px;
  --ne-callbar-h: 60px;


  /* The container gutter, named so the full-bleed bands can inset their text
     plate to exactly the same line the container sits on. Redefined at
     1200px, where the wrap also clears the fixed side rail. */
  --ne-gut: clamp(20px, 4vw, 56px);
  --ne-gut-l: clamp(20px, 4vw, 56px);

  /* Horizontal run of the 4° diagonal that masks the page-hero photograph.
     48px across a ~640px tall hero is 4.3°, inside the 3–5° brand range. */
  --ne-hero-skew: 48px;

  /* The notch is the corner language: buttons are cut, not rounded. The
     radii below survive for inputs and for the pages not yet rebuilt. */
  --ne-notch: 12px;
  --ne-radius: 2px;
  --ne-radius-lg: 12px;
  --ne-radius-pill: 999px;

  /* Section internal rhythm — one pattern, every section.
     eyebrow -> 14px -> heading -> 22px -> lead -> 44px -> content */
  --ne-r-eyebrow: 14px;
  --ne-r-lead: 22px;
  --ne-r-content: 44px;

  /* ---------------------------------------------------- BRAND DEVICES
     Hazard stripe. Three appearances only: the rule above the header, the
     loader's progress fill, and the rule that closes the footer. */
  --ne-hazard: repeating-linear-gradient(
    45deg,
    var(--ne-amber) 0 10px,
    var(--ne-ink) 10px 20px
  );

  /* Film grain over dark sections. 64px tile, six grey levels so it
     actually compresses; carried at a few percent so it reads as
     photographed black rather than flat black. */
  --ne-noise: url("../img/noise.png");
  --ne-noise-opacity: 0.035;

  /* ------------------------------------------------------------ DEPTH
     One stack, declared once, so the fixed layers cannot drift out of
     order as pieces get added. */
  --ne-z-rail: 90;
  /* The mobile menu sits UNDER the header on purpose. It covers the page and
     the side rail, but the bar stays above it so the burger — now showing an
     X — is still there to close it. Above the header the panel covered its
     own control. */
  --ne-z-menu: 96;
  --ne-z-mega: 98;
  --ne-z-header: 100;
  --ne-z-badge: 105;
  --ne-z-callbar: 110;
  --ne-z-loader: 300;

  /* ----------------------------------------------------------- MOTION
     Mirrors of the GSAP eases used in animations.js, so a CSS transition
     and a tween of the same element feel like one system. */
  --ne-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ne-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ne-ease-power2: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ne-ease-power3: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ne-dur-fast: 200ms;
  --ne-dur: 320ms;
  --ne-dur-slow: 600ms;
}

/* The display heading below 992px is NOT set here.

   It was, briefly, and that was wrong: --ne-fs-hero is worn by three different
   heroes and they do not want the same thing on a phone. The slider's headline
   is three or four short words and was reading small; a page hero's is a whole
   sentence — "Machine, operator and insurance included" — and the same increase
   pushed it to four lines. One token cannot serve both.

   Each hero now sets its own size below the breakpoint, in sections.css beside
   the rest of that component's rules. */