/* ============================================================
   VexusInsurance — Foundations: Color & Type (PURPLE / "roxo")
   Auto-insurance quotes for Brazilians in the USA.
   Tone: premium, trustworthy, warm, personal — recolored to the
   deep-plum Vexus brand.
   ============================================================ */

/* ---- Fonts (Google Fonts CDN) ---- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Ink — deep aubergine plum. Trust, premium credibility. Primary dark brand color. */
  --ink:        #2A1140;
  --ink-2:      #1C0A2C;   /* deeper, for full-bleed dark sections */
  --ink-soft:   #3C2152;   /* raised surfaces on dark */

  /* Plum accent — the Vexus purple. The single hero accent. */
  --amber:      #7B2E9E;   /* royal plum (primary accent) */
  --amber-deep: #5E2179;   /* deeper plum — pressed/active, gradients */
  --amber-soft: #F0E2F7;   /* tint backgrounds, highlights */

  /* Success green — "you're covered", confirmations, savings. */
  --green:      #2E9E6B;
  --green-soft: #DCF0E5;

  /* WhatsApp green — the real contact channel, used only on WhatsApp CTAs. */
  --whatsapp:   #25D366;

  /* ---------- NEUTRALS (cool lavender-tinted) ---------- */
  --paper:      #FAF7FC;   /* primary canvas — soft lavender white */
  --surface:    #FFFFFF;   /* cards, raised panels */
  --surface-2:  #F4EFF8;   /* sunken / alt rows */
  --line:       #E8DFF0;   /* hairline borders */
  --line-2:     #D8CBE6;   /* stronger dividers */

  /* ---------- TEXT ---------- */
  --fg1:        #271433;   /* primary text (plum-black) */
  --fg2:        #5E4D6B;   /* secondary text */
  --fg3:        #94849E;   /* muted / captions / placeholders */
  --fg-on-ink:  #FAF7FC;   /* text on ink backgrounds */
  --fg-on-ink-2:#BCA9CC;   /* secondary text on ink */
  --fg-on-amber:#FFFFFF;   /* text on plum accent */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, sans-serif;

  /* ---------- TYPE SCALE ---------- */
  --text-display: 700 clamp(2.75rem, 5.5vw, 4.5rem)/1.02 var(--font-display);
  --text-h1:      700 clamp(2.25rem, 4vw, 3.25rem)/1.06 var(--font-display);
  --text-h2:      600 clamp(1.75rem, 2.6vw, 2.25rem)/1.12 var(--font-display);
  --text-h3:      600 1.3125rem/1.25 var(--font-display);
  --text-lead:    400 clamp(1.0625rem, 1.4vw, 1.25rem)/1.55 var(--font-body);
  --text-body:    400 1rem/1.6 var(--font-body);
  --text-sm:      400 0.875rem/1.55 var(--font-body);
  --text-eyebrow: 600 0.8125rem/1.2 var(--font-body);
  --tracking-eyebrow: 0.14em;

  /* ---------- RADII ---------- */
  --r-xs: 8px;  --r-sm: 12px; --r-md: 16px;
  --r-lg: 22px; --r-xl: 28px; --r-pill: 999px;

  /* ---------- 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; --sp-20: 80px; --sp-24: 96px;

  /* ---------- SHADOWS (plum-tinted, layered, soft) ---------- */
  --shadow-sm: 0 1px 2px rgba(42,17,64,0.06), 0 1px 3px rgba(42,17,64,0.05);
  --shadow-md: 0 4px 10px rgba(42,17,64,0.06), 0 12px 24px rgba(42,17,64,0.08);
  --shadow-lg: 0 12px 28px rgba(42,17,64,0.12), 0 28px 60px rgba(42,17,64,0.14);
  --shadow-amber: 0 8px 22px rgba(123,46,158,0.30);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms; --dur: 240ms; --dur-slow: 420ms;
}