/* ============================================================
   Zinco Manufacturing — Design Tokens v1
   Source: moodboard/direction.md (Gate 0B locked)
   Palette PROPOSED from the direction's named colours
   (deep navy / steel grey / restrained blue / off-white / white).
   Designer: confirm or adjust hexes, then commit.
   ============================================================ */
:root {
  /* ── colour ──
     Five named colours from direction.md, split by ROLE.
     Foreground and background roles never share a token name, even when
     they share a hex, so a future change to one cannot silently break
     the other. */

  /* accent */
  --primary: #2E6FA3;         /* restrained blue — CTA fill, links, eyebrow BAR */
  --on-primary: #FFFFFF;      /* text/icon on --primary fill. 5.36:1, passes AA */

  /* foreground */
  --heading-color: #0F2233;   /* deep navy — headlines, nav text */
  --text: #16202A;            /* near-black — body */
  --soft-text: #5C6870;       /* steel grey, darkened for text. 5.29:1 on --alt-bg */

  /* background */
  --bg: #FFFFFF;              /* page background */
  --surface: #FFFFFF;         /* cards */
  --alt-bg: #F5F6F7;          /* off-white — alternate sections */
  --band-bg: #0F2233;         /* deep navy — dark photographic bands, footer */

  /* non-text decorative — never used for type */
  --rule: #64707B;            /* steel grey — dividers, hairlines, icon strokes */

  /* semantic — added S3, client-approved.
     direction.md states --primary is the only accent, so this is a
     deliberate, narrow exception: it marks COST/failure states only
     (the "cost to you" lines and error marks in the problem exhibits),
     never decoration and never a second brand colour. Oxidised rust,
     chosen to sit beside steel blue without competing.
     5.95:1 on white — passes AA for body text. */
  --danger: #A8442E;

  /* text on dark bands */
  --on-band: #FFFFFF;         /* 16.19:1 on --band-bg */
  --on-band-soft: #C7D0D8;    /* muted text on dark bands, passes AA */

  /* ── dark band treatment ──
     Reserved for hero, the secondary-graded block and the footer.
     Photography-led: images sit under these overlays, not beside them.

     Overlay floor raised to 0.55 at the top stop. White text over a
     photograph of unknown luminance cannot be verified from tokens
     alone, and 0.25 was too weak exactly where the eyebrow and H1 sit.
     0.55 guarantees AA against a light photograph. Still verify per
     image at S4 render-verify. */
  --band-2: #1B3A52;    /* mid navy — gradient step */
  --overlay-dark: linear-gradient(180deg, rgba(15,34,51,0.55) 0%, rgba(15,34,51,0.70) 55%, rgba(15,34,51,0.88) 100%);

  /* ── typography — fluid, mobile to desktop automatically ── */
  --font-display: 'Inter', sans-serif;  /* SemiBold/Bold, tight tracking */
  --font-body: 'Inter', sans-serif;
  --font-label: 'Inter', sans-serif;    /* uppercase micro-labels */
  --h1: clamp(32px, 4.4vw, 56px);
  --h2: clamp(26px, 3.2vw, 38px);
  --h3: clamp(18px, 2vw, 22px);
  --standfirst: clamp(19px, 2.2vw, 26px); /* secondary-graded standfirst */
  --display-number: clamp(48px, 6vw, 88px); /* added S3: large editorial
      numerals in the problem scroll panels. A size this large had no
      token; adding one keeps the "never hardcode a value" rule intact. */
  --body-lg: 17px;
  --body: 15px;
  --label: 13px;
  --eyebrow: 11px;
  --lh-tight: 1.08;      /* large display headlines */
  --lh-heading: 1.2;
  --lh-body: 1.7;
  --tracking-display: -0.02em;  /* tighten large type */
  --tracking-eyebrow: 0.12em;

  /* ── spacing scale (8pt) — airy, per direction ── */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --section-pad: clamp(64px, 8vw, 104px);
  --card-pad: 28px;
  --max-width: 1200px;
  --max-width-wide: 1400px;  /* full-bleed photography bands */
  --max-width-text: 68ch;    /* line length cap for body copy */
  --max-width-panel: 760px;  /* added S3: centred storytelling panel */
  --gutter: 24px;

  /* ── form — radii set by designer ── */
  --radius-btn: 25px;      /* buttons */
  --radius-card: 18px;     /* cards — primary choice */
  --radius-panel: 24px;    /* hero cards, feature panels */
  --radius-tag: 16px;      /* small icons, stat boxes */
  --border: 1px solid #E3E6E9;
  --shadow-card: 0 1px 3px rgba(15, 34, 51, 0.08);

  /* ── motion — level: SUBTLE (Gate 0B) ── */
  /* easing */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);   /* general UI */
  --ease-out: cubic-bezier(.16, 1, .3, 1);        /* reveals, lifts */
  /* duration */
  --dur-fast: 150ms;   /* buttons, links, icons */
  --dur-base: 300ms;   /* cards, inputs, dropdowns */
  --dur-slow: 600ms;   /* scroll reveals, hero */
  /* movement */
  --lift-sm: translateY(-2px);   /* buttons */
  --lift-md: translateY(-4px);   /* cards */
  --fade-up: translateY(24px);   /* scroll reveal start position */
  /* scale */
  --scale-hover: 1.02;           /* images only */
  /* shadow */
  --shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.12);
}

/* ==========================================================
   Motion usage guide
   ==========================================================
   Buttons
     transition: transform var(--dur-fast) var(--ease-out);
     :hover { transform: var(--lift-sm); }

   Cards
     transition: transform var(--dur-base) var(--ease-out),
                 box-shadow var(--dur-base) var(--ease-out);
     :hover { transform: var(--lift-md);
              box-shadow: var(--shadow-hover); }

   Images
     transition: transform var(--dur-base) var(--ease-out);
     :hover { transform: scale(var(--scale-hover)); }

   Links
     transition: color var(--dur-fast) var(--ease-out);

   Dropdown / modal
     transition: all var(--dur-base) var(--ease-standard);

   Scroll reveal
     initial:  opacity: 0; transform: var(--fade-up);
     visible:  opacity: 1; transform: translateY(0);
     transition: opacity var(--dur-slow) var(--ease-out),
                 transform var(--dur-slow) var(--ease-out);
     Fires once. Never re-triggers, never loops.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}