/* =====================================================================
   CALLRECOVER DESIGN TOKENS — "Electric Violet" (LOCKED 2026-07-06)
   =====================================================================
   Source of truth: CallRecover_Main_Template.html v2 :root block.
   The LOCKED sections below are byte-identical to the template values.
   Do not change any LOCKED value without John's sign-off.

   The EXTENSIONS section adds tokens the template used as inline
   one-off values (radii, shadows, tints) plus motion tokens for the
   stage-4 animation work. Extensions introduce NO new colors — every
   value derives from the locked palette.
   ===================================================================== */

:root {
  /* ---- COLORS — LOCKED ---- */
  --bg-page: #0D0B1F;
  --bg-surface-1: #170F30;   /* section-level panels (why-us, footer) */
  --bg-surface-2: #1E1640;   /* cards (steps, why, pricing, phone mock) */

  --violet: #7B61FF;
  --violet-dark: #5B45D1;
  --violet-light: #C9B8FF;   /* badges / small accent text on dark bg */

  --coral: #FF6B4A;
  --coral-light: #FF8F6B;

  --text-primary: #F5F3FF;
  --text-secondary: #B7AFD1;
  --text-muted: #8B84A8;

  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.18);

  --gradient-cta: linear-gradient(90deg, var(--violet), var(--coral));
  --gradient-hero: linear-gradient(135deg, #0D0B1F 0%, #1A1333 55%, #2A1B4A 100%);

  /* ---- TYPE — LOCKED (webfonts selected 2026-07-06, John delegated the call) ----
     Bricolage Grotesque (display) + Figtree (body), both Google Fonts.
     System stack retained as fallback. Sizes unchanged from template. */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-body: 18px;       /* larger than default — older-user readability */
  /* h1/h2 bumped from template (34-56 / 26-38) on 2026-07-06 under John's
     design-latitude grant — Bricolage Grotesque carries larger sizes well
     and the stronger hierarchy reads better. Colors remain untouched. */
  --font-size-h1: clamp(36px, 6.5vw, 64px);
  --font-size-h2: clamp(28px, 4.2vw, 42px);

  /* ---- LAYOUT — LOCKED ---- */
  --radius: 14px;
  --max-width: 1120px;
  --pad-section: 88px;

  /* =====================================================================
     EXTENSIONS — tokens promoted from the template's inline values
     ===================================================================== */

  /* Type scale below h2 (values as used in the template) */
  --font-size-h3: 19px;         /* step-card h3 */
  --font-size-sub: 19px;        /* hero subheadline */
  --font-size-ui: 16px;         /* nav links, card body, price list */
  --font-size-small: 15px;      /* why-card body */
  --font-size-fine: 14px;       /* eyebrow, footer, phone-mock text */

  /* Radius scale (all already present in the template as inline values) */
  --radius-md: 16px;            /* phone mock */
  --radius-lg: 20px;            /* hero visual, price card, CTA band */
  --radius-pill: 999px;         /* buttons, eyebrow, badges */

  /* Shadows / glows — the only permitted shadows on the site */
  --shadow-cta: 0 8px 24px rgba(123, 97, 255, 0.35);    /* primary button */
  --glow-price: 0 0 60px rgba(123, 97, 255, 0.25);      /* price card halo */

  /* Violet tints (background washes derived from --violet #7B61FF) */
  --violet-tint: rgba(123, 97, 255, 0.18);       /* eyebrow bg, why-icon bg */
  --violet-tint-soft: rgba(123, 97, 255, 0.10);  /* ghost button hover */

  /* Hero glow blobs (decorative ::before/::after radial fills) */
  --glow-violet: rgba(123, 97, 255, 0.35);
  --glow-coral: rgba(255, 107, 74, 0.25);

  /* Nav chrome */
  --nav-bg: rgba(13, 11, 31, 0.85);              /* sticky header w/ blur */

  /* ---- MOTION (stage 4 consumes these; defined now so timing is a
          design decision, not scattered magic numbers) ---- */
  --dur-hover: 0.15s;                            /* button/hover micro */
  --dur-reveal: 0.5s;                            /* scroll-in reveals */
  --dur-slow: 0.9s;                              /* payoff-pace, calm beats */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);     /* default settle */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* cartoon overshoot — pops, bubbles, SFX text */
  --reveal-shift: 16px;                          /* translateY distance for reveals */

  /* Focus visibility on dark bg (keyboard users) */
  --focus-ring: 3px solid var(--violet-light);
  --focus-offset: 2px;
}