/* =============================================================================
   BENEFITRA — DESIGN TOKENS  (single source of truth for ALL colour/type/space)
   Three layers:  PRIMITIVE  ->  SEMANTIC  ->  COMPONENT
   This is the ONLY file allowed to contain raw hex / rgb channel values.
   base.css, components.css and every page read var() tokens exclusively.
   Light theme re-maps the SEMANTIC layer only (never re-declares components).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   LAYER 1 — PRIMITIVE  (raw brand ramp; no meaning attached)
   -------------------------------------------------------------------------- */
:root {
  /* Navy ramp */
  --c-navy-950:#060e1a;
  --c-navy-900:#0a1628;
  --c-navy-850:#0d1c33;
  --c-navy-800:#0f1f38;
  --c-navy-700:#13243f;
  --c-navy-600:#1b2f4d;

  /* Emerald / ocean-green ramp */
  --c-emerald-800:#03603f;
  --c-emerald-700:#047857;
  --c-emerald-600:#059669;
  --c-emerald-500:#10b981;
  --c-emerald-400:#34d399;
  --c-emerald-300:#6ee7b7;

  /* Neutrals */
  --c-white:#ffffff;
  --c-offwhite:#f8f7f4;
  --c-slate-100:#eef2f7;
  --c-slate-300:#cbd5e1;
  --c-slate-500:#64748b;
  --c-ink:#0a1628;

  /* Status */
  --c-amber-400:#fbbf24;
  --c-amber-500:#f59e0b;

  /* Google review star gold (used for the rating stars in both themes) */
  --c-gold:#fbbc04;
  --c-gold-empty:#d4d4d4;

  /* Extended hues — hero atmosphere + chart data series */
  --c-blue-400:#60a5fa;
  --c-sky-500:#3b82f6;
  --c-blue-700:#1d4ed8;              /* AA-safe blue for small chip text on white */
  --c-blue-800:#1e3a8a;              /* darker blue stop for review-avatar gradient */
  --c-teal-700:#0f766e;              /* dark teal stop so white avatar initials clear AA */
  --c-violet-300:#a78bfa;            /* AA-safe violet for text on the dark navy bg */
  --c-violet-400:#8b5cf6;
  --c-violet-600:#7c3aed;            /* AA-safe violet for link text on white */
  --c-teal-400:#2dd4bf;
  --c-green-live:#22c55e;

  /* Navy stops used only inside the animated mesh gradient */
  --c-navy-mesh-a:#0d1f3c;
  --c-navy-mesh-b:#0e1a2e;
  --c-navy-mesh-c:#091422;
  --c-navy-880:#0b1a30;              /* third subtle section tone (dark) */

  /* Airy LIGHT-hero neutrals (soft, cool, minty whites) */
  --c-light-1:#f3f8f6;
  --c-light-2:#e9f3ef;
  --c-light-3:#eef4fb;

  /* Raw channels (enable alpha surfaces without new hex in consumers) */
  --ch-white:255 255 255;
  --ch-navy:10 22 40;
  --ch-emerald:5 150 105;
  --ch-mint:52 211 153;
  --ch-blue:96 165 250;
  --ch-sky:59 130 246;
  --ch-violet:139 92 246;
  --ch-green-live:34 197 94;

  /* Spacing scale (4px base) */
  --space-1:.25rem; --space-2:.5rem;  --space-3:.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;

  /* Type scale */
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem;
  --fs-xl:1.375rem; --fs-2xl:1.75rem; --fs-3xl:2.25rem; --fs-4xl:3rem;

  /* Radii */
  --radius-sm:8px; --radius:14px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;

  /* Motion */
  --dur-fast:.18s; --dur:.28s; --dur-slow:.5s;
  --ease:cubic-bezier(.22,1,.36,1);
}

/* ----------------------------------------------------------------------------
   LAYER 2 — SEMANTIC  (purpose aliases)   ***DARK is the site default***
   -------------------------------------------------------------------------- */
:root {
  /* veil = the alpha overlay colour used to build surfaces on top of --bg */
  --ch-veil:var(--ch-white);
  --ch-text:var(--ch-white);

  --bg:var(--c-navy-900);
  --bg-2:var(--c-navy-850);          /* elevated band background */
  --bg-3:var(--c-navy-880);          /* third subtle tone for section variety */
  --bg-inset:var(--c-navy-950);

  --surface:rgb(var(--ch-veil) / .035);
  --surface-2:rgb(var(--ch-veil) / .06);
  --surface-hover:rgb(var(--ch-veil) / .09);

  --text:rgb(var(--ch-text) / 1);
  --text-muted:rgb(var(--ch-text) / .62);
  --text-subtle:rgb(var(--ch-text) / .55);   /* AA-safe at 12px on navy */

  --border:rgb(var(--ch-veil) / .09);
  --border-strong:rgb(var(--ch-veil) / .17);

  /* primary is emerald-700 so white text clears WCAG AA (>=4.5) on it */
  --primary:var(--c-emerald-700);
  --primary-hover:var(--c-emerald-800);
  --primary-fg:var(--c-white);

  --accent:var(--c-emerald-400);     /* brand highlight TEXT on current bg */
  --accent-2:var(--c-emerald-300);

  --accent-soft:rgb(var(--ch-emerald) / .12);   /* chip / icon-tile bg */
  --accent-border:rgb(var(--ch-emerald) / .30);

  --ring:var(--c-emerald-400);
  --success:var(--c-emerald-500);
  --warning:var(--c-amber-400);

  --backdrop:rgb(var(--ch-navy) / .6);   /* drawer scrim */
  --mask-on:rgb(var(--ch-text));         /* opaque colour for CSS masks (hue ignored) */

  /* Brand gradients (theme-aware; kept here so consumers stay hex-free) */
  --grad-brand-text:linear-gradient(135deg,var(--c-emerald-300),var(--c-emerald-400) 45%,#2dd4bf);
  --grad-hero:
     radial-gradient(1200px 600px at 78% -10%, rgb(var(--ch-emerald) / .16), transparent 60%),
     radial-gradient(900px 500px at 8% 20%, rgb(59 130 246 / .10), transparent 55%),
     linear-gradient(160deg, var(--c-navy-850), var(--c-navy-900) 55%, var(--c-navy-950));
  --grad-cta:linear-gradient(135deg, rgb(var(--ch-emerald) / .16), rgb(var(--ch-mint) / .08) 60%, rgb(59 130 246 / .08));

  /* Shadows */
  --shadow-sm:0 1px 2px rgb(var(--ch-navy) / .35);
  --shadow:0 12px 34px rgb(var(--ch-navy) / .38);
  --shadow-lg:0 24px 60px rgb(var(--ch-navy) / .5);

  /* Effects — heading depth-glow, chart gridlines, step connector, card hover glow */
  --section-glow:radial-gradient(60% 80% at 50% 50%, rgb(var(--ch-emerald) / .16), transparent 72%);
  --hd-gridline:rgb(var(--ch-white) / .06);
  --step-line:linear-gradient(90deg, transparent, var(--accent-border) 14%, var(--accent-border) 86%, transparent);
  --step-num-ring:var(--bg-3);                       /* ring behind step numbers = matching section bg */
  --card-glow-hover:0 18px 44px rgb(var(--ch-navy) / .5), 0 0 0 1px var(--accent-border), 0 0 26px rgb(var(--ch-emerald) / .22);

  /* --- HERO ATMOSPHERE (the hero is a deliberately DARK showcase band in BOTH
         themes — like the live site keeps its hero navy in light mode. These
         tokens are NOT re-mapped by the light theme; only the video treatment is. */
  --hero-base:var(--c-navy-950);                    /* solid base under the mesh */
  --hero-fg:var(--c-white);                          /* headline copy (always light) */
  --hero-fg-muted:rgb(255 255 255 / .74);
  --hero-fg-subtle:rgb(255 255 255 / .55);
  --hero-accent:var(--c-emerald-400);                /* bright accent that reads on the dark hero */
  --hero-grad:linear-gradient(135deg,var(--c-emerald-300),var(--c-emerald-400) 45%,var(--c-teal-400));
  --hero-scrim:linear-gradient(180deg, rgb(var(--ch-navy) / .88) 0%, rgb(var(--ch-navy) / .62) 42%, rgb(var(--ch-navy) / .82) 100%);
  --hero-mesh:linear-gradient(135deg,var(--c-navy-900) 0%,var(--c-navy-mesh-a) 20%,var(--c-navy-900) 35%,var(--c-navy-mesh-b) 50%,var(--c-navy-900) 65%,var(--c-navy-mesh-c) 80%,var(--c-navy-900) 100%);
  --hero-grid-line:rgb(255 255 255 / .015);
  --hero-surface:rgb(255 255 255 / .05);             /* glass cards/panels over the hero */
  --hero-surface-border:rgb(255 255 255 / .1);
  --aurora-opacity:.4;
  --aurora-band-1:linear-gradient(90deg,transparent 5%,rgb(var(--ch-emerald) / .15) 30%,rgb(var(--ch-mint) / .08) 50%,rgb(var(--ch-sky) / .12) 70%,transparent 95%);
  --aurora-band-2:linear-gradient(90deg,transparent 10%,rgb(var(--ch-violet) / .1) 35%,rgb(var(--ch-blue) / .1) 55%,rgb(var(--ch-emerald) / .08) 75%,transparent 90%);
  --aurora-band-3:linear-gradient(90deg,transparent 15%,rgb(var(--ch-mint) / .06) 40%,rgb(var(--ch-violet) / .08) 60%,transparent 85%);
  --bokeh-1:radial-gradient(circle,rgb(var(--ch-emerald) / .08),transparent 70%);
  --bokeh-2:radial-gradient(circle,rgb(var(--ch-sky) / .06),transparent 70%);
  --bokeh-3:radial-gradient(circle,rgb(var(--ch-violet) / .05),transparent 70%);
  --bokeh-4:radial-gradient(circle,rgb(var(--ch-mint) / .06),transparent 70%);
  --bokeh-5:radial-gradient(circle,rgb(var(--ch-blue) / .04),transparent 70%);
  --particle-a:rgb(var(--ch-mint) / .35);
  --particle-b:rgb(var(--ch-blue) / .25);
  --particle-c:rgb(var(--ch-violet) / .2);
  /* Hero background = animated mesh + aurora + particles + a self-hosted b-roll VIDEO.
     Video treatment + legibility scrim are tokenised so the hero stays a controlled
     DARK showcase in both themes (only the video variant swaps per theme). */
  --hero-video-opacity:.5;
  --hero-video-filter:saturate(.62) brightness(.72) contrast(1.05);
  --hero-video-scrim:linear-gradient(180deg, rgb(var(--ch-navy) / .74) 0%, rgb(var(--ch-navy) / .5) 42%, rgb(var(--ch-navy) / .8) 100%);
  --cta-glow:rgb(var(--ch-emerald) / .42);

  /* --- METRICS CHART PANEL (glass dashboard over the dark hero) --- */
  --hd-panel-bg:rgb(255 255 255 / .05);
  --hd-panel-border:rgb(255 255 255 / .1);
  --hd-panel-glow:radial-gradient(circle,rgb(var(--ch-mint) / .06),transparent 60%);
  --hd-panel-fg:rgb(255 255 255 / .95);
  --hd-panel-fg-muted:rgb(255 255 255 / .5);
  --hd-livedot:var(--c-green-live);
  --chart-cash:var(--c-emerald-400);
  --chart-turnover:var(--c-amber-400);
  --chart-clients:var(--c-blue-400);
  --chart-area-opacity:.28;
  --chip-good-bg:rgb(var(--ch-mint) / .14);
  --chip-good-border:rgb(var(--ch-mint) / .35);
  --chip-good-fg:var(--c-emerald-400);
  --chip-info-bg:rgb(var(--ch-blue) / .14);
  --chip-info-border:rgb(var(--ch-blue) / .35);
  --chip-info-fg:var(--c-blue-400);
  --card-rotor:conic-gradient(from var(--card-angle,0deg),transparent 40%,var(--accent) 50%,transparent 60%);
}

/* ----------------------------------------------------------------------------
   LAYER 2 — SEMANTIC  ***LIGHT theme override*** (re-map semantics ONLY)
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --ch-veil:var(--ch-navy);
  --ch-text:var(--ch-navy);

  --bg:var(--c-white);
  --bg-2:var(--c-offwhite);
  --bg-inset:var(--c-slate-100);

  --surface:rgb(var(--ch-veil) / .025);
  --surface-2:rgb(var(--ch-veil) / .045);
  --surface-hover:rgb(var(--ch-veil) / .07);

  --text:var(--c-navy-900);
  --text-muted:rgb(var(--ch-text) / .66);
  --text-subtle:rgb(var(--ch-text) / .66);   /* AA-safe at 12px on white */

  --border:rgb(var(--ch-veil) / .1);
  --border-strong:rgb(var(--ch-veil) / .18);

  --primary:var(--c-emerald-700);
  --primary-hover:var(--c-emerald-800);
  --primary-fg:var(--c-white);

  --accent:var(--c-emerald-700);     /* darker so brand text clears AA on white */
  --accent-2:var(--c-emerald-600);

  --accent-soft:rgb(var(--ch-emerald) / .1);
  --accent-border:rgb(var(--ch-emerald) / .28);

  --ring:var(--c-emerald-600);

  --grad-brand-text:linear-gradient(135deg,var(--c-emerald-700),var(--c-emerald-600) 55%,#0f766e);
  --grad-hero:
     radial-gradient(1200px 600px at 80% -12%, rgb(var(--ch-emerald) / .1), transparent 60%),
     radial-gradient(900px 520px at 6% 12%, rgb(59 130 246 / .06), transparent 55%),
     linear-gradient(160deg, var(--c-white), var(--c-offwhite) 70%);
  --grad-cta:linear-gradient(135deg, rgb(var(--ch-emerald) / .1), rgb(var(--ch-mint) / .06) 60%, rgb(59 130 246 / .05));

  --shadow-sm:0 1px 2px rgb(var(--ch-navy) / .08);
  --shadow:0 12px 30px rgb(var(--ch-navy) / .1);
  --shadow-lg:0 24px 60px rgb(var(--ch-navy) / .14);

  --bg-3:var(--c-light-1);           /* third subtle tone (light) */

  /* ---- AIRY LIGHT HERO (brief): toggling the theme now visibly transforms the
     hero itself, not just the body. Soft light mesh, light particles, dark copy,
     a light scrim to keep the headline AA. All hero + chart tokens re-mapped. */
  --hero-base:var(--c-light-1);
  --hero-fg:var(--c-navy-900);
  --hero-fg-muted:rgb(var(--ch-navy) / .72);
  --hero-fg-subtle:rgb(var(--ch-navy) / .60);
  --hero-accent:var(--c-emerald-700);
  --hero-grad:linear-gradient(135deg,var(--c-emerald-700),var(--c-emerald-600) 50%,#0f766e);
  --hero-scrim:linear-gradient(180deg, rgb(var(--ch-white) / .74) 0%, rgb(var(--ch-white) / .34) 44%, rgb(var(--ch-white) / .72) 100%);
  /* LIGHT theme hero is an AIRY LIGHT band with DARK copy (not a dark showcase). The
     video is dimmed and overlaid with a strong WHITE scrim so the band stays light
     enough for navy text to clear 5:1. */
  --hero-video-opacity:.22;
  --hero-video-scrim:linear-gradient(180deg, rgb(255 255 255 / .82) 0%, rgb(255 255 255 / .66) 46%, rgb(255 255 255 / .84) 100%);
  --hero-video-filter:saturate(.9) brightness(1.05) contrast(1);
  --hero-mesh:linear-gradient(135deg,var(--c-light-1) 0%,var(--c-light-2) 22%,var(--c-white) 40%,var(--c-light-3) 58%,var(--c-light-2) 78%,var(--c-light-1) 100%);
  --hero-grid-line:rgb(var(--ch-navy) / .03);
  --hero-surface:rgb(var(--ch-navy) / .045);
  --hero-surface-border:rgb(var(--ch-navy) / .10);
  --aurora-opacity:.55;
  --particle-a:rgb(var(--ch-emerald) / .32);
  --particle-b:rgb(var(--ch-sky) / .24);
  --particle-c:rgb(var(--ch-navy) / .12);

  /* Chart glass panel over the LIGHT hero: light card, dark copy, darker series */
  --hd-panel-bg:rgb(var(--ch-white) / .62);
  --hd-panel-border:rgb(var(--ch-navy) / .10);
  --hd-panel-fg:var(--c-navy-900);
  --hd-panel-fg-muted:rgb(var(--ch-navy) / .66);   /* AA at 9-10px on the light panel */
  --hd-gridline:rgb(var(--ch-navy) / .09);
  --chart-cash:var(--c-emerald-700);
  --chart-turnover:var(--c-amber-500);
  --chart-clients:var(--c-sky-500);
  --chart-area-opacity:.22;
  --chip-good-fg:var(--c-emerald-700);
  --chip-info-fg:var(--c-blue-700);                /* darker so small chip text clears AA on white */

  /* soften the heading depth-glow on white */
  --section-glow:radial-gradient(60% 80% at 50% 50%, rgb(var(--ch-emerald) / .10), transparent 72%);
  --step-num-ring:var(--bg-3);
  --card-glow-hover:0 18px 40px rgb(var(--ch-navy) / .12), 0 0 0 1px var(--accent-border), 0 0 22px rgb(var(--ch-emerald) / .16);
}

/* ----------------------------------------------------------------------------
   LAYER 3 — COMPONENT  (component-scoped; reference SEMANTIC only)
   -------------------------------------------------------------------------- */
:root {
  /* Fonts */
  --font-display:'Montserrat','DM Sans',system-ui,sans-serif;
  --font-heading:'DM Sans','Inter',system-ui,sans-serif;
  --font-body:'DM Sans','Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* Layout — ONE shared centered container for EVERY section.
     Content column is identical on every band: max-width 1360, centered
     (margin-inline:auto via .container), with a single symmetric --gutter
     (equal left+right padding). Full-bleed section BACKGROUNDS still span the
     viewport; only the CONTENT shares this 1360 container. */
  --container:1360px;
  --gutter:clamp(20px, 5vw, 24px);
  --nav-h:68px;

  /* Buttons */
  --btn-radius:var(--radius);
  --btn-pad-y:14px;  --btn-pad-x:30px;
  --btn-primary-bg:var(--primary);
  --btn-primary-bg-hover:var(--primary-hover);
  --btn-primary-fg:var(--primary-fg);
  --btn-ghost-bg:var(--surface-2);
  --btn-ghost-bg-hover:var(--surface-hover);
  --btn-ghost-fg:var(--text);
  --btn-ghost-border:var(--border-strong);

  /* Cards */
  --card-bg:var(--surface);
  --card-bg-hover:var(--surface-2);
  --card-border:var(--border);
  --card-border-hover:var(--accent-border);
  --card-radius:var(--radius-lg);
  --card-pad:var(--space-8);
  --card-shadow-hover:var(--shadow);

  /* Nav */
  --nav-bg:transparent;
  --nav-bg-scrolled:rgb(var(--ch-navy) / .82);
  --nav-border:var(--border);
  --nav-fg:var(--text-muted);
  --nav-fg-hover:var(--text);
  --nav-panel-bg:var(--bg-2);
  --nav-panel-border:var(--border-strong);
  --nav-panel-shadow:var(--shadow-lg);

  /* Nav chrome OVER A DARK HERO (un-scrolled header on a `bfr-hero-dark` page).
     Deliberately NOT re-mapped by the light theme: the homepage hero is a dark
     showcase in BOTH themes, so the logo + nav links must stay LIGHT (white) over
     it in both themes. Only once the header scrolls past the hero and gains its own
     solid/blurred veil does it revert to theme-appropriate colours (--nav-fg etc.). */
  --nav-hero-fg:rgb(255 255 255 / .82);          /* nav link rest colour on the hero */
  --nav-hero-fg-hover:var(--c-white);            /* nav link hover/active on the hero */
  --nav-hero-surface:rgb(255 255 255 / .08);     /* toggle/burger chip bg on the hero */
  --nav-hero-surface-border:rgb(255 255 255 / .16);

  /* Badge / pill */
  --badge-bg:var(--accent-soft);
  --badge-border:var(--accent-border);
  --badge-fg:var(--accent);

  /* Icon tile — filled gradient variant used on FEATURE (elevated) cards so the
     icon reads as a solid brand chip rather than a soft tint. White glyph. */
  --icon-tile-grad:linear-gradient(140deg,var(--c-emerald-500),var(--c-emerald-700));
  --icon-tile-grad-fg:var(--c-white);

  /* FEATURE (elevated) card — used for the Solutions pillars so that band's cards
     look distinct from the outlined Why cards next to it (varied treatment). */
  --card-feature-bg:var(--surface-2);
  --card-feature-border:var(--border-strong);
  --card-feature-shadow:var(--shadow);
  --card-feature-sheen:linear-gradient(180deg, rgb(var(--ch-emerald) / .05), transparent 40%);

  /* Eyebrow accent line (small brand rule that precedes the eyebrow label) */
  --eyebrow-line:var(--accent);

  /* Google reviews */
  --star-fill:var(--c-gold);
  --star-empty:var(--c-gold-empty);
  /* Avatar gradients darkened so the white initials clear WCAG AA at every pixel
     (the lightest stop of each is <= emerald-700 luminance): green / teal / blue. */
  --rev-avatar-1:linear-gradient(135deg,var(--c-emerald-700),var(--c-emerald-800));
  --rev-avatar-2:linear-gradient(135deg,var(--c-teal-700),var(--c-emerald-800));
  --rev-avatar-3:linear-gradient(135deg,var(--c-blue-700),var(--c-blue-800));
  --rev-avatar-fg:var(--c-white);
  --rev-score-fg:var(--text);
  --rev-seeall-fg:var(--accent);
  --rev-seeall-bg:var(--accent-soft);
  --rev-seeall-border:var(--accent-border);
  --rev-seeall-bg-hover:var(--surface-hover);

  /* PATHS — three product cards, each with its own brand accent (emerald / blue /
     violet). Card surfaces come from the shared surface tokens; only the accent
     hue differs per variant. Accents are the -400 ramp on the dark page. */
  --path-card-bg:var(--surface);
  --path-card-border:var(--border);
  --path-value-bg:var(--surface-2);
  --path-value-border:var(--border-strong);
  --path-tile-bg:var(--surface-2);
  --path-tile-border:var(--border);

  --path-benefits-accent:var(--c-emerald-400);
  --path-benefits-soft:rgb(var(--ch-emerald) / .12);
  --path-benefits-border:rgb(var(--ch-emerald) / .30);
  --path-benefits-glow:rgb(var(--ch-emerald) / .18);
  --path-saas-accent:var(--c-blue-400);
  --path-saas-soft:rgb(var(--ch-blue) / .12);
  --path-saas-border:rgb(var(--ch-blue) / .30);
  --path-saas-glow:rgb(var(--ch-blue) / .18);
  --path-broker-accent:var(--c-violet-300);
  --path-broker-soft:rgb(var(--ch-violet) / .12);
  --path-broker-border:rgb(var(--ch-violet) / .30);
  --path-broker-glow:rgb(var(--ch-violet) / .18);
}

:root[data-theme="light"] {
  /* nav bar turns to a light veil when scrolled */
  --nav-bg-scrolled:rgb(255 255 255 / .6);   /* lighter → the frosted-glass blur reads through in light theme */

  /* Darken the path accents so link/label text clears WCAG AA on the white bg. */
  --path-benefits-accent:var(--c-emerald-700);
  --path-saas-accent:var(--c-blue-700);
  --path-broker-accent:var(--c-violet-600);
}