/* CEH Website V4.0 — design tokens (v0.3 = frozen v0.2 baseline; source of truth for the frontend).
   v0.2: greens re-based on the APPROVED assets — brand green sampled from the supplied logo (#083820),
   action green sampled from the machine livery in the approved product photos (#34B10A).
   Contrast ratios verified (WCAG 2.x) — see design-system/DESIGN_SYSTEM_V4.md §2.
   No external fonts are loaded; proposed web fonts are listed in DESIGN_SYSTEM_V4.md §3. */
:root {
  /* Brand greens — dark CEH green identity + machine-livery lime accent */
  --green-950: #05271A;   /* deepest: footer, utility bar (white 16.01:1) */
  --green-900: #083820;   /* BRAND GREEN = logo colour; dark sections, headings on light (white 13.15:1) */
  --green-700: #0F5A30;   /* solid green buttons (Download PDF), links on light (white 8.32:1) */
  --green-600: #13703C;   /* hover */
  --green-100: #E7F2EA;   /* tinted surface */
  --lime-400:  #34B10A;   /* LIVERY GREEN action fill (Get a Quote) with green-950 text 5.5:1; accent on dark 4.66:1; NEVER white text on it (2.82) and never as text on white */
  --lime-300:  #46C21C;   /* hover (dark text 6.66:1) */

  /* Neutrals — steel */
  --ink:       #121816;
  --steel-700: #3D4744;
  --steel-600: #5E6A64;   /* secondary text on white (5.64:1) */
  --steel-500: #6B7672;   /* minimum for meta text on white (4.71:1) */
  --steel-300: #B9C2BE;
  --steel-200: #D7DDDA;   /* borders */
  --steel-100: #ECEFED;
  --surface:   #F3F5F4;   /* alternating section background (brand green on it 12.01:1) */
  --photo-well: #FFFFFF;  /* well behind product cut-outs: white, matching the supplied white/transparent backgrounds */
  --white:     #FFFFFF;

  /* Text on dark green surfaces */
  --on-dark-lead:  #D8E5DD;   /* lead paragraphs in page heroes */
  --on-dark-muted: #CFE0D6;   /* secondary text in referral band, help band, PDF row */
  --on-dark-slot:  #F1F7F3;   /* CMS placeholder text on dark */

  /* Homepage hero sky — sampled from the top edge of the approved panorama */
  --sky-100: #CBD9EB;  --sky-150: #BACCE4;  --sky-200: #B4C7E1;   /* mobile copy band (text ≥ 7:1) */
  --sky-300: #9EB6D7;  --sky-400: #7FA2CC;  --sky-500: #5F8DBC;  --sky-600: #5687B9;   /* desktop extension */

  /* Signal */
  --amber-400: #F5B70A;   /* promo badge (ink text 9.98:1) */
  --amber-700: #8A5A00;   /* review stars on white (5.9:1) */
  --red-700:   #B42318;   /* errors */
  --red-50:    #FDECEA;   /* error message background */
  --success-700: #1E7A3C; /* server-confirmed success */
  --success-50:  #EAF5EE; /* success message background */
  --logo-plate: #FEFEFE;  /* matches the logo file's own background */

  /* Social platforms — official brand colours (homepage hero icons, white glyph) */
  --brand-youtube:  #FF0000;
  --brand-facebook: #1877F2;
  --brand-whatsapp: #1C9E4D;   /* WhatsApp green #25D366 at 75 % brightness, same hue: white glyph 3.47:1 (was 1.98) */
  --brand-instagram: radial-gradient(circle at 30% 110%, #FDF497 0%, #FDF497 5%, #FD5949 45%, #D6249F 60%, #285AEB 90%);

  /* Semantic */
  --color-text: var(--ink);
  --color-text-muted: var(--steel-600);
  --color-border: var(--steel-200);
  --color-bg: var(--white);
  --color-bg-alt: var(--surface);
  --color-link: var(--green-700);
  --color-focus: #1A73E8;  /* high-visibility focus ring, distinct from brand */

  /* Typography */
  --font-display: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.5rem);  /* 36 → 56 */
  --fs-h1: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem);     /* 30 → 44 */
  --fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);           /* 24 → 32 */
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);   /* 19 → 22 */
  --fs-body: 1rem;        /* 16 */
  --fs-lead: 1.125rem;    /* 18 */
  --fs-small: 0.875rem;   /* 14 */
  --fs-caption: 0.75rem;  /* 12 — labels/badges only, uppercase */
  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-caps: 0.06em;

  /* Spacing — 4px base */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --section-y: clamp(40px, 3vw + 28px, 64px);   /* compact: max 64px desktop, 40px mobile */

  /* Layout */
  --container: 1280px;
  --gutter: 24px;
  --page-x: 16px;          /* mobile side gutter */
  --header-h: 76px;
  --header-h-mobile: 60px;
  --utility-h: 36px;

  /* Shape & depth */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-1: 0 1px 2px rgba(10, 35, 26, .08), 0 1px 1px rgba(10, 35, 26, .04);
  --shadow-2: 0 6px 18px rgba(10, 35, 26, .12);
  --border: 1px solid var(--color-border);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}
@media (min-width: 768px) { :root { --page-x: 24px; } }
@media (min-width: 1280px) { :root { --page-x: 32px; } }
@media (prefers-reduced-motion: reduce) { :root { --dur: 0ms; } }