/* ==========================================================================
   Advantage Plus — design tokens
   The ONLY file allowed to hold brand hex values. Everything else uses var().
   Logo colours (sampled from assets/img/brand/logo-full@2x.png): blue #0D0096, orange #FF5900.
   They appear ONLY in the logo files. Since 02/10/2026 the site uses the soft palette below,
   each a muted version of one of those two hues (the old saturated values are in the
   comments). Contrast figures are WCAG ratios, checked against the real pairings.
   ========================================================================== */
:root {
  /* Brand — softened from the logo */
  --ap-indigo-900: #1F1D4A;   /* was #07004F. Footer, hero, dark bands; logo orange on it 5.0:1 */
  --ap-indigo-800: #2A2766;   /* was #0A0073. Dark surfaces; white text 13.3:1 */
  --ap-indigo-700: #34318A;   /* was #0D0096 (logo blue). Primary: headings, nav, links; 10.8:1 on white */
  --ap-indigo-500: #4A47A3;   /* was #3A33B8. Link colour/hover on light bg; 7.2:1 on --ap-bg */
  --ap-indigo-100: #ECEBF5;   /* was #E8E7F7. Tinted bg */
  --ap-orange-600: #B04F1E;   /* was #E04E00. Hover/pressed, error text; white on it 5.3:1, 4.9:1 on --ap-bg */
  --ap-orange-500: #D9692E;   /* was #FF5900 (logo orange). CTA fill, accents; white on it 3.5:1 = large text only */
  --ap-orange-300: #E8854F;   /* new. Small orange TEXT on indigo-900/800 (5.9 / 5.0:1) */
  --ap-orange-100: #FBEFE7;   /* was #FFEDE3. Soft accent bg */

  /* Neutrals (cool slate greys) */
  --ap-steel-900: #2E3440;    /* was #14161C. Body text; 11.7:1 on --ap-bg */
  --ap-steel-700: #434957;    /* was #3C4150. Secondary text; 7.6:1+ on every light bg */
  --ap-steel-500: #5B6170;    /* was #6B7180. Muted text, form-field borders */
  --ap-steel-300: #D6D8E1;    /* was #C9CDD6. Decorative borders, fine-line motif */
  --ap-steel-100: #EEEEF4;    /* was #F3F4F7. Alternate section bg */
  --ap-bg: #F7F7FA;           /* new. Page background (cards and header stay white) */
  --ap-white: #FFFFFF;
  /* Indian flag tricolour (official saffron / India green), used only for the Solutions hero
     heading, at the client's request (02/10/2026). On indigo-900: saffron 7.4:1, white
     15.8:1, green 3.4:1. Green passes AA only as LARGE text, so never use it below 24px bold. */
  --ap-flag-saffron: #FF9933;
  --ap-flag-green: #138808;

  /* WhatsApp green, softened; white text 5.2:1 */
  --ap-whatsapp: #2E7A55;     /* was #0B7A3E */

  /* Translucent helpers (derived from the tokens above) */
  --ap-white-a10: rgb(255 255 255 / 0.10);
  --ap-white-a20: rgb(255 255 255 / 0.20);
  --ap-white-a70: rgb(255 255 255 / 0.78);
  --ap-indigo-a08: rgb(52 49 138 / 0.08);
  --ap-shadow: 0 1px 2px rgb(31 29 74 / 0.06), 0 8px 24px rgb(31 29 74 / 0.08);
  --ap-shadow-lg: 0 2px 4px rgb(31 29 74 / 0.06), 0 18px 48px rgb(31 29 74 / 0.14);
  --ap-glow: 0 0 10px 2px rgb(217 105 46 / 0.45);
  --ap-shadow-up: 0 -4px 16px rgb(31 29 74 / 0.2);
  --ap-scrim: rgb(31 29 74 / 0.5);
  /* Home cover-photo tint (indigo-900): >= 0.78 wherever hero text can sit */
  --ap-scrim-strong: rgb(31 29 74 / 0.86);
  --ap-scrim-text: rgb(31 29 74 / 0.78);
  --ap-scrim-fade: rgb(31 29 74 / 0.3);
  --ap-scrim-clear: rgb(31 29 74 / 0);
  /* Type */
  --font-head: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Barlow", "Segoe UI", Arial, sans-serif;
  --fs-sm: 0.9375rem;                                  /* 15px */
  --fs-base: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); /* 17–18px */
  --fs-lead: clamp(1.1875rem, 1.1rem + 0.45vw, 1.375rem);
  --fs-h4: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.125rem);
  --fs-h1: clamp(2.625rem, 1.9rem + 3.4vw, 4.75rem);
  --lh-body: 1.65;
  --measure: 68ch;

  /* Space & shape */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);
  --container: 1240px;
  --radius: 4px;
  --radius-lg: 6px;
  --slant: -12deg;           /* italic angle of "PLUS" */
  --header-h: 96px;
  --header-h-small: 72px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 1024px) {
  :root { --header-h: 120px; --header-h-small: 86px; }   /* room for the 88px desktop logo */
}