/* assets/brand.css  —  THE BRAND FILE (re-skin here)
 * ===========================================================================
 * Single source of truth for this brand's COLOUR + TYPE. Every page (the
 * lander + all four result pages) links this file, and the cross-sell UI
 * reads these same tokens, so editing the block below re-skins the whole
 * funnel in one place. Nothing else needs a colour/font edit.
 *
 * To launch a new brand you normally touch only the "EDIT PER BRAND" block.
 * The tokens ship NEUTRAL on purpose (placeholder navy + sky-blue) — swap
 * them for the real brand palette.
 * ===========================================================================*/

/* Fonts — change type by swapping this @import + the two --font-* vars. */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&display=swap');

:root{
  /* ======================= EDIT PER BRAND ======================= */
  /* Keep the ACCENT bright: the design puts dark text on the accent
     colour, so a light/vivid accent (not a dark one) keeps CTAs legible. */
  --brand:        #1E2430;   /* primary dark: header + hero background, headings, body text (slate) */
  --accent:       #FF7A1A;   /* the single ACTION colour: buttons, highlights, key words (orange) */
  --accent-hover: #F06A08;   /* accent, a touch darker — button/link hover */
  --accent-deep:  #C25410;   /* accent as readable TEXT / icons on a light background */
  --brand-alt:    #3B82F6;   /* optional secondary accent, used sparingly (blue) */
  --muted:        #46505C;   /* secondary / grey body text */
  --rec-badge:    #D1F801;   /* cross-sell "Recommended" chip highlight */

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* headings + wordmark */
  --font-body:    'Inter', system-ui, sans-serif;          /* body text */
  /* ============================================================= */

  /* Neutral system tokens — usually fine to leave as-is. */
  --white:   #FFFFFF;
  --surface: #F7F8FB;              /* light card surface (cross-sell) */
  --line:    rgba(15,27,51,.13);   /* hairline on light backgrounds */
  --line-2:  #E6E9EF;              /* card border (cross-sell) */
  --ok:      #16A06A;
  --err:     #E23B2E;
  --radius:  16px;

  /* -----------------------------------------------------------------
     ENGINE ALIASES — the HTML/JS reference these legacy names. Leave
     them mapped to the tokens above; don't rename or hard-code colours.
     ----------------------------------------------------------------- */
  --black:      var(--brand);
  --lime:       var(--accent);
  --green:      var(--accent-hover);
  --green-dark: var(--accent-deep);
  --blue:       var(--brand-alt);
  --grey:       var(--muted);
  --ink:        var(--brand);
  --mint:       var(--accent);
  --mint-d:     var(--accent-deep);
  --bg:         var(--surface);
  --dt-lime:    var(--rec-badge);
}

/* Wordmark accent segments — brand.boot.js renders the parts flagged
   accent:true (in vertical.client.js) as <i> inside every [data-brand-word]. */
[data-brand-word] i{ color:var(--accent); font-style:normal; }