/* =====================================================================
   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;
}