/* ==========================================================================
   tokens.css - IE Industrial Logistics (M) Sdn Bhd
   Single source of truth for colour, type, spacing and radii.
   Values sampled from the locked references (web 1089x1444, mobile 870x1808).
   ========================================================================== */

:root {
  /* ---- brand palette (sec.11: white/off-white, dark ink, IE yellow) ---- */
  --ie-yellow: #ffd613;          /* CTA pills, active underline, accents   */
  --ie-yellow-deep: #f5c400;     /* pressed state                          */
  --ie-yellow-soft: #fdf1b8;     /* pale icon disc fill (mobile features)  */
  --ink: #14161a;                /* footer bar, dark surfaces              */
  --ink-text: #0b0c0f;           /* H1 on light backgrounds                */
  --navy: #001b4d;               /* body copy + section eyebrows           */
  --navy-soft: #33507f;          /* secondary copy                         */
  --hero-navy: #020f1f;          /* mobile hero backdrop behind the truck  */
  --hero-navy-2: #0a1a2a;
  --white: #ffffff;
  --off-white: #fefefe;          /* page background                        */
  --surface: #ffffff;
  --line: #e6e8ec;               /* card borders                           */
  --line-soft: #eef1f4;
  --sky: #4ea8fe;                /* hero sky reference tone                */

  /* ---- typography ---- */
  --font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-display: "Inter", "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;
  --fw-black: 800;

  /* fluid scale. Values are calibrated so the locked reference widths land on
     the measured type scale of each reference: mobile 870px = "premium
     typography" reference, desktop 1089px = dense reference (see
     docs/BUILD_REPORT.md for the measured cap heights). */
  --fs-hero: clamp(1.75rem, 1.35rem + 2.6vw, 2.75rem);   /* 870 -> 44px */
  --fs-h2: clamp(1.3125rem, 1rem + 1.6vw, 1.5rem);       /* 870 -> 24px */
  --fs-h3: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-lead: clamp(0.9375rem, 0.88rem + 0.55vw, 1.0625rem); /* 870 -> 16px */
  --fs-body: clamp(0.8125rem, 0.78rem + 0.3vw, 0.9375rem);
  --fs-small: clamp(0.6875rem, 0.66rem + 0.25vw, 0.8125rem);
  --fs-eyebrow: clamp(0.6875rem, 0.66rem + 0.2vw, 0.75rem);
  --fs-price: clamp(1.5rem, 1.2rem + 1.4vw, 1.875rem);

  --lh-tight: 1.02;
  --lh-heading: 1.12;
  --lh-body: 1.5;
  --ls-eyebrow: 0.07em;

  /* ---- spacing / layout ---- */
  --page-max: 1089px;            /* locked desktop canvas                  */
  --content-max: 979px;          /* 1089 - 2 * 55px padding (manifest boxes) */
  /* 870px reference insets content 20px; the desktop reference uses 55px */
  --gutter: clamp(16px, 2.3vw, 20px);
  --section-y: clamp(14px, 2.1vw, 26px);
  --gap-card: clamp(10px, 1.2vw, 15px);
  --gap-block: clamp(8px, 1vw, 14px);
  /* v2.5 (owner brief 2026-09-25, item 7): the hero band's own height, as the
     design locks it per breakpoint (phone band 46.7vw capped at 406px, desktop
     392/420/470px - responsive.css overrides it there). The hero photo box is
     sized from this value, so the bitmap can never be taller than the band it
     sits in and can never be clipped by the section below it (that is the crop
     the owner reported as "the two lorries look cut off" at 1366px and up). */
  --hero-band: min(47vw, 406px);

  /* ---- radii / elevation (sampled from the locked cards) ---- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 26px -18px rgba(15, 23, 42, 0.22);
  --shadow-pill: 0 8px 20px -12px rgba(245, 196, 0, 0.85);
  --shadow-photo: 0 18px 44px -26px rgba(2, 15, 31, 0.45);

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;

  /* ---- header ---- */
  --header-h: 74px;              /* locked desktop header height           */
  --header-h-mobile: 64px;       /* mobile bar (reference crop is 82 tall)  */
  --wa-pill-w: 192px;            /* locked desktop WhatsApp pill width     */
  --touch: 44px;                 /* minimum touch target                   */

  /* safe area (sec.8) */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}