/* =========================================================
   Direction 02 — FOUNDRY
   Navy-dominant, cinematic. ~80% navy / ~20% light.
   Molten is the SINGLE accent. There is no cyan in this
   direction at all, which is the cleanest way to keep it
   from reading as a recolour of Direction 01.

   Accent rule, adapted from DESIGN-SPEC §3.1:
   the shared system splits cyan (interactive) from molten
   (heat + process). Foundry has no cyan, so molten absorbs
   the label / eyebrow / interactive-mark role as well.
   The half of the rule that still holds absolutely:
   MOLTEN IS NEVER A CTA. Primary CTAs are white.
   ========================================================= */

:root {
  /* Surfaces — dark-dominant. Four navies, used as bands. */
  --void:     #04101f;   /* footer only */
  --navy-900: #061529;   /* hero ground, statement bands */
  --navy-800: #0a1e3c;   /* primary brand navy */
  --navy-700: #102c55;   /* elevated band */
  --navy-600: #16385f;   /* card surface on dark */

  /* The 20% */
  --paper:    #f2f5f9;
  --white:    #ffffff;
  --ink:      #0f1b2d;

  /* Text on dark — all measured, see README */
  --chrome:    #e8eef5;  /* headings on dark   — 15.7:1 on navy-900 */
  --steel:     #a9bbd0;  /* body on dark       —  7.1:1 on navy-700 */
  --steel-dim: #8ba0b9;  /* labels on dark     —  5.2:1 on navy-700 */

  /* Text on light */
  --slate:    #5a6b82;   /* 4.97:1 on paper */
  --slate-lt: #5f7189;   /* 4.56:1 on paper */

  /* Lines */
  --rule-d:  rgba(255,255,255,.11);
  --rule-d2: rgba(255,255,255,.22);
  --rule-l:  #e2e8ef;
  --rule-l2: #cfd9e4;

  /* The one accent — heat */
  --molten:     #ff6b1a;  /* on dark only  — 5.8:1 on navy-800 */
  --ember:      #ff9144;  /* highlights, focus ring on dark */
  --molten-ink: #c2410c;  /* the same accent, legible on light — 4.7:1 on paper */
  --glow:       rgba(255,145,68,.72);

  /* Sustainability only — never appears outside that one card */
  --green:    #1e7a4c;
  --green-lt: #4ec98a;   /* 6.6:1 on navy-700 */

  --focus: var(--ember);

  /* Type — Poppins is geometric, so it wants less negative
     tracking and more line-height than Direction 01's Inter Tight. */
  --f-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --f-body:    'Inter', 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, Consolas, monospace;

  --fs-h1:    clamp(2.4rem, 1.5rem + 4.4vw, 5.25rem);
  --fs-h2:    clamp(1.6rem, 1.1rem + 2vw, 2.9rem);
  --fs-h3:    clamp(1.05rem, .95rem + .42vw, 1.25rem);
  --fs-body:  clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-small: .885rem;
  --fs-label: .72rem;

  --ls-label: .18em;

  /* Rhythm — DESIGN-SPEC §3.3. Home order is
     loose · tight · loose · normal · normal · loose · normal · tight · loose
     so no density ever runs three deep. */
  --pad-loose:  clamp(6rem, 16vh, 11rem);
  --pad-normal: clamp(4rem, 10vh, 7rem);
  --pad-tight:  clamp(2.5rem, 6vh, 4rem);

  --gutter: clamp(1.25rem, .6rem + 3vw, 4.5rem);
  --maxw:   1440px;
  --nav-h:  76px;

  /* Motion — Foundry reads "molten": longer, heavier, more
     inertia than Precision's snap. */
  --d-xs: 220ms;
  --d-s:  380ms;
  --d-m:  640ms;
  --d-l:  950ms;
  --d-xl: 1300ms;

  --e-out:   cubic-bezier(.16, 1, .3, 1);
  --e-quart: cubic-bezier(.76, 0, .24, 1);
  --e-quad:  cubic-bezier(.25, .46, .45, .94);

  --rad: 3px;   /* DESIGN-SPEC §3.5 — one value, no scale */

  --rev: 0;     /* driven by the preloader pour front */
}

html {
  background: var(--navy-900);
  /* The nav is position:fixed, so every in-page anchor — the 9 links to
     quality.html#certifications, the skip link to #content, #enquiry, #range,
     #loop, #alloys — lands its target underneath the header without this.
     scroll-padding-top on the scrolling element fixes all of them at once,
     including the skip link, which is the one that matters most: a keyboard
     user jumping to #content should not arrive at content hidden behind the
     bar they were trying to skip. */
  scroll-padding-top: calc(var(--nav-h) + 1.2rem);
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.62;
  color: var(--chrome);
  background: var(--navy-900);
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--rad);
}