/* ==========================================================================
   SpillMaster™ Design Tokens
   Single source of truth for colour, type, spacing, radii, shadows & motion.
   Naming: --{category}-{role|scale}. Components reference tokens only.
   ========================================================================== */

/* ---------- Fonts (self-hosted, SIL Open Font License) ---------- */
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/barlow-condensed-800-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/barlow-condensed-900-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow Condensed";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/barlow-condensed-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-variable.woff2") format("woff2");
}

:root {
  /* ---------- Colour: brand palette ---------- */
  --color-yellow-400: #ffc20e;          /* Brand primary – safety yellow */
  --color-yellow-500: #f5ab15;          /* Brand secondary – amber */
  --color-yellow-100: #fff4d1;

  --color-navy-950: #050e1b;
  --color-navy-900: #0a1a2f;            /* Deep navy – primary dark ground */
  --color-navy-800: #0f2542;
  --color-navy-700: #173559;
  --color-blue-600: #1f4f8a;            /* Corporate blue – links, details */
  --color-blue-400: #5b8fd1;

  --color-white: #ffffff;
  --color-grey-50: #f5f7fa;
  --color-grey-100: #eceff4;
  --color-grey-200: #dce2ea;
  --color-grey-300: #c3ccd8;
  --color-grey-500: #7d8a9b;
  --color-grey-600: #566377;
  --color-grey-800: #243042;

  /* ---------- Colour: semantic roles ---------- */
  --color-bg: var(--color-white);
  --color-bg-alt: var(--color-grey-50);
  --color-bg-inverse: var(--color-navy-900);
  --color-bg-inverse-deep: var(--color-navy-950);
  --color-surface: var(--color-white);
  --color-surface-inverse: var(--color-navy-800);

  --color-text: var(--color-navy-900);
  --color-text-body: var(--color-grey-800);
  --color-text-muted: var(--color-grey-600);
  --color-text-inverse: var(--color-white);
  --color-text-inverse-muted: #b7c3d3;
  --color-link: var(--color-blue-600);

  --color-accent: var(--color-yellow-400);        /* The single CTA accent */
  --color-accent-hover: var(--color-yellow-500);
  --color-on-accent: var(--color-navy-900);

  --color-border: var(--color-grey-200);
  --color-border-strong: var(--color-grey-300);
  --color-border-inverse: rgba(255, 255, 255, 0.14);
  --color-focus: var(--color-yellow-400);
  --color-focus-on-light: var(--color-blue-600);

  --color-border-inverse-strong: rgba(255, 255, 255, 0.38);
  --color-header-scrolled: rgba(5, 14, 27, 0.97);
  --color-navy-tint: rgba(10, 26, 47, 0.07);

  /* Third-party brand colour: WhatsApp enquiry button only */
  --color-whatsapp: #128c7e;            /* WhatsApp teal-green – white text passes AA (4.5:1) */
  --color-whatsapp-hover: #075e54;
  --color-on-whatsapp: var(--color-white);

  --color-overlay-navy: rgba(5, 14, 27, 0.86);
  --color-overlay-navy-soft: rgba(5, 14, 27, 0.55);
  --color-overlay-navy-clear: rgba(5, 14, 27, 0);
  --color-glass-inverse: rgba(255, 255, 255, 0.06);

  /* ---------- Colour: brand patterns ---------- */
  --gradient-hazard: repeating-linear-gradient(-45deg, var(--color-accent) 0 0.625rem, var(--color-navy-900) 0.625rem 1.25rem);
  --gradient-tint-stripes: repeating-linear-gradient(-45deg, var(--color-navy-tint) 0 0.75rem, transparent 0.75rem 1.5rem);
  --gradient-stats-overlay: linear-gradient(90deg, var(--color-overlay-navy) 0%, var(--color-overlay-navy) 42%, var(--color-overlay-navy-soft) 100%);

  /* ---------- Typography ---------- */
  --font-heading: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
  --font-label: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-heading: 800;
  --weight-display: 900;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.1875rem;
  --text-xl: 1.375rem;
  --text-2xl: clamp(1.625rem, 1.35rem + 0.9vw, 2rem);
  --text-3xl: clamp(2.125rem, 1.6rem + 2vw, 3.125rem);
  --text-4xl: clamp(2.5rem, 1.7rem + 3.2vw, 4.25rem);
  --text-display: clamp(3rem, 1.9rem + 4.6vw, 5.75rem);
  --text-stat: clamp(3rem, 2.2rem + 3vw, 4.75rem);

  --leading-tight: 0.95;
  --leading-heading: 1.02;
  --leading-snug: 1.2;
  --leading-normal: 1.6;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.01em;
  --tracking-heading: 0.005em;
  --tracking-label: 0.14em;
  --tracking-button: 0.04em;

  /* Reading measures (max line lengths) */
  --measure-xs: 20rem;
  --measure-sm: 24rem;
  --measure-md: 34rem;
  --measure-lg: 36rem;
  --measure-xl: 38rem;
  --measure-2xl: 56rem;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-section: clamp(4.5rem, 3rem + 5vw, 7.5rem);
  --space-section-sm: clamp(3rem, 2rem + 3vw, 4.5rem);

  /* ---------- Layout ---------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --header-height: 76px;
  --utility-height: 38px;

  /* ---------- Radii ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --radius-round: 50%;

  /* ---------- Borders ---------- */
  --border-width: 1px;
  --border-width-thick: 3px;
  --border-width-accent: 4px;
  --border-width-button: 2px;

  /* ---------- Shadows (soft, navy-tinted) ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 26, 47, 0.06);
  --shadow-sm: 0 2px 8px rgba(10, 26, 47, 0.06), 0 1px 2px rgba(10, 26, 47, 0.04);
  --shadow-md: 0 10px 30px rgba(10, 26, 47, 0.08), 0 2px 6px rgba(10, 26, 47, 0.05);
  --shadow-lg: 0 24px 60px rgba(10, 26, 47, 0.16), 0 6px 16px rgba(10, 26, 47, 0.08);
  --shadow-accent: 0 10px 24px rgba(245, 171, 21, 0.28);
  --shadow-drop-seal: drop-shadow(0 12px 22px rgba(5, 14, 27, 0.35));

  /* ---------- Icons ---------- */
  --icon-sm: 1rem;
  --icon-md: 1.5rem;
  --icon-lg: 2rem;
  --icon-stroke: 1.75;
  --stroke-hairline: 1;
  --stroke-heavy: 2.5;

  /* ---------- Component sizes ---------- */
  --size-control-sm: 2.5rem;
  --size-control: 3rem;
  --size-control-lg: 3.5rem;
  --size-compare-mark: 1.75rem;
  --size-whatsapp-float: 3.5rem;
  --size-icon-tile: 3rem;
  --size-icon-btn: 3rem;
  --size-avatar: 3rem;
  --size-dot: 0.625rem;
  --size-dot-active: 1.75rem;
  --size-seal-sm: 4.25rem;
  --size-seal-md: 7rem;
  --size-seal-lg: 9.5rem;
  --size-seal-xl: 12.5rem;
  --logo-height-header: 2.75rem;        /* supplied logo artwork, ratio ≈ 4.1 : 1 */
  --logo-height-header-sm: 2.25rem;
  --logo-height-footer: 3.25rem;
  --width-app-card: 21.5rem;
  --width-callout: 18rem;
  --width-stepper-tab: 8.5rem;
  --basis-credential: 13rem;
  --basis-credential-md: 16rem;
  --min-width-table: 30rem;
  --breakout-min-height: 36rem;
  --breakout-min-height-sm: 20rem;
  --cta-seals-height: 17rem;
  --cta-seals-height-sm: 9rem;
  --hero-min-height: 42rem;
  --hero-slant: 16%;
  --hero-stripe: 0.75rem;

  /* ---------- Seal (SVG badge) type, in SVG user units ---------- */
  --seal-text-size: 10.5px;
  --seal-label-size: 14px;
  --seal-figure-size: 26px;
  --seal-ring-stroke: 2;
  --seal-mark-stroke: 1.5;

  /* ---------- Motion ---------- */
  --duration-fast: 150ms;
  --duration-base: 260ms;
  --duration-slow: 600ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-distance: 1.5rem;
  --lift-sm: -2px;
  --lift-md: -4px;

  /* ---------- Layers ---------- */
  --z-base: 1;
  --z-raised: 10;
  --z-header: 100;
  --z-overlay: 200;
  --z-skip: 300;

  /* ---------- Breakpoints (reference only; CSS media queries cannot read vars)
     sm 600px · md 900px · lg 1100px ---------- */
}