/* =========================================================
   QUOTE GENIE — Design Tokens
   Colors & Typography
   =========================================================

   Color system is rooted in the Quote Genie brand:
   - Primary blue (#1F4DDC) is the flagship product color used
     inside the Quote Form and AI estimate card.
   - Widget embed uses a softer iris (#667EEA → #5A67D8 gradient)
     which is the default when customers haven't themed it.
   - Trust/success signals are emerald green (#22C55E).
   - The "save / later" CTA uses a warm orange (#F97316).
   - The mascot's accent color is sunshine yellow (#FACC15-ish).
   Neutrals mirror Tailwind's slate ramp, since the product is
   built on Tailwind v4.
   ========================================================= */

:root {
  /* --- Brand ---------------------------------------------- */
  --qg-primary:           #1F4DDC;   /* Quote Genie flagship blue — used for CTAs, step indicators, focus rings */
  --qg-primary-600:       #1A40B8;   /* hover state */
  --qg-primary-700:       #15337A;   /* press state */
  --qg-primary-50:        #EFF6FF;   /* tinted backgrounds, step-circle bg */
  --qg-primary-100:       #DBEAFE;
  --qg-primary-gradient:  linear-gradient(135deg, #1F4DDC 0%, #3B82F6 100%);

  /* Demo-site blue — used on the "DFW Plumbing Co." landing demo */
  --qg-demo-blue:         #2563EB;

  /* Widget iris — the default color the embed widget ships with
     when the customer hasn't passed data-qg-primary-color */
  --qg-widget-iris:       #667EEA;
  --qg-widget-iris-dark:  #5A67D8;
  --qg-widget-gradient:   linear-gradient(135deg, #667EEA 0%, #5A67D8 100%);

  /* Mascot yellow — the hard hat / wrench color. Brand accent. */
  --qg-mascot-yellow:     #FACC15;
  --qg-mascot-yellow-600: #EAB308;

  /* --- Semantic ------------------------------------------ */
  --qg-success:           #22C55E;   /* "Connect Me to a Trusted Pro" CTA, checkmarks */
  --qg-success-700:       #059669;
  --qg-success-50:        #D1FAE5;
  --qg-success-text:      #065F46;

  --qg-warning:           #F59E0B;   /* moderate-complexity dot, photo nudge */
  --qg-warning-50:        #FEF3C7;
  --qg-warning-text:      #92400E;

  --qg-danger:            #EF4444;   /* major-complexity dot, form errors */
  --qg-danger-50:         #FEE2E2;
  --qg-danger-text:       #991B1B;

  --qg-info:              #0EA5E9;   /* info callouts ("Location for accurate pricing") */
  --qg-info-50:           #F0F9FF;
  --qg-info-text:         #0C4A6E;

  --qg-save:              #F97316;   /* "Save Estimate for Later" — warm orange */
  --qg-save-700:          #EA580C;

  /* --- Neutrals (slate ramp) ----------------------------- */
  --qg-fg:                #111827;   /* primary text (near-black, not #000) */
  --qg-fg-1:              #0F172A;   /* marketing headline text */
  --qg-fg-2:              #374151;   /* body text, form labels */
  --qg-fg-3:              #475569;   /* muted text, sub-copy */
  --qg-fg-4:              #6B7280;   /* placeholder + meta */
  --qg-fg-5:              #9CA3AF;   /* disabled, small print */

  --qg-bg:                #FFFFFF;   /* base surface */
  --qg-bg-soft:           #F9FAFB;   /* subtle section bg */
  --qg-bg-softer:         #F8FAFC;   /* card bg, demo banners */
  --qg-bg-muted:          #F1F5F9;   /* tab switcher bg */

  --qg-border:            #E5E7EB;   /* default border */
  --qg-border-soft:       #E2E8F0;   /* lighter variant (demo site) */
  --qg-border-focus:      var(--qg-primary);

  /* Hero / page gradient (from QuoteForm.jsx) */
  --qg-page-gradient:     linear-gradient(to bottom, #EFF6FF, #FFFFFF);

  /* --- Radii --------------------------------------------- */
  --qg-radius-sm:         0.375rem;  /* 6px — tiny chips */
  --qg-radius-md:         0.5rem;    /* 8px — inputs, buttons */
  --qg-radius-lg:         0.75rem;   /* 12px — widget container, cards */
  --qg-radius-xl:         1rem;      /* 16px — landing cards, form card */
  --qg-radius-2xl:        1.25rem;
  --qg-radius-pill:       2rem;      /* chips / confidence badges */
  --qg-radius-full:       9999px;

  /* --- Shadows (soft, never harsh) ----------------------- */
  --qg-shadow-xs:         0 1px 3px rgba(0,0,0,0.1);
  --qg-shadow-sm:         0 2px 8px rgba(0,0,0,0.10);
  --qg-shadow-md:         0 4px 6px -1px rgba(0,0,0,0.10);
  --qg-shadow-lg:         0 10px 25px rgba(0,0,0,0.10);
  --qg-shadow-brand:      0 10px 25px rgba(31,77,220,0.30);
  --qg-shadow-success:    0 4px 15px rgba(34,197,94,0.30);
  --qg-shadow-save:       0 4px 15px rgba(249,115,22,0.30);
  --qg-shadow-float:      0 4px 12px rgba(0,0,0,0.15);

  /* --- Spacing ------------------------------------------- */
  --qg-space-1:           4px;
  --qg-space-2:           8px;
  --qg-space-3:           12px;
  --qg-space-4:           16px;
  --qg-space-5:           20px;
  --qg-space-6:           24px;
  --qg-space-8:           32px;
  --qg-space-10:          40px;
  --qg-space-12:          48px;
  --qg-space-16:          64px;

  /* --- Typography ---------------------------------------- */
  --qg-font-sans:         'Inter', -apple-system, BlinkMacSystemFont,
                          'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --qg-font-system:       system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Type scale — matches product usage */
  --qg-size-xs:           12px;   /* small print, disclaimers, char counter */
  --qg-size-sm:           14px;   /* body small, helper text, form labels */
  --qg-size-base:         16px;   /* body default */
  --qg-size-md:           18px;   /* hero paragraph */
  --qg-size-lg:           20px;   /* section headings on mobile */
  --qg-size-xl:           24px;   /* card titles, widget title */
  --qg-size-2xl:          32px;   /* estimate price display */
  --qg-size-3xl:          40px;   /* "Your Estimate is Ready!" */
  --qg-size-4xl:          42px;   /* demo-site hero H1 */

  /* Weights */
  --qg-weight-regular:    400;
  --qg-weight-medium:     500;
  --qg-weight-semibold:   600;
  --qg-weight-bold:       700;
  --qg-weight-black:      900;   /* demo site uses 900 for logos/titles */

  /* Line heights */
  --qg-lh-tight:          1.05;
  --qg-lh-snug:           1.25;
  --qg-lh-normal:         1.5;
  --qg-lh-relaxed:        1.6;   /* widget copy */

  /* Letter spacing */
  --qg-tracking-wide:     0.2px;
}


/* =========================================================
   SEMANTIC ELEMENTS — drop these rules into any page that
   imports this stylesheet and elements will inherit the
   brand defaults automatically.
   ========================================================= */

body {
  font-family: var(--qg-font-sans);
  color: var(--qg-fg);
  background: var(--qg-bg);
  font-size: var(--qg-size-base);
  line-height: var(--qg-lh-relaxed);
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  -webkit-font-smoothing: antialiased;
}

/* Display: used for the biggest moment — the estimate reveal */
.qg-display {
  font-size: var(--qg-size-3xl);
  font-weight: var(--qg-weight-bold);
  line-height: var(--qg-lh-tight);
  color: var(--qg-fg);
  letter-spacing: -0.01em;
}

h1, .qg-h1 {
  font-size: var(--qg-size-4xl);
  font-weight: var(--qg-weight-black);
  line-height: var(--qg-lh-tight);
  color: var(--qg-fg-1);
  letter-spacing: var(--qg-tracking-wide);
  margin: 0 0 12px;
}

h2, .qg-h2 {
  font-size: var(--qg-size-2xl);
  font-weight: var(--qg-weight-bold);
  line-height: var(--qg-lh-snug);
  color: var(--qg-fg);
  margin: 0 0 8px;
}

h3, .qg-h3 {
  font-size: var(--qg-size-xl);
  font-weight: var(--qg-weight-bold);
  line-height: var(--qg-lh-snug);
  color: var(--qg-fg);
  margin: 0 0 6px;
}

h4, .qg-h4 {
  font-size: var(--qg-size-md);
  font-weight: var(--qg-weight-semibold);
  color: var(--qg-fg);
  margin: 0 0 6px;
}

p, .qg-body {
  font-size: var(--qg-size-base);
  line-height: var(--qg-lh-relaxed);
  color: var(--qg-fg-2);
}

.qg-lead {
  font-size: var(--qg-size-md);
  line-height: var(--qg-lh-normal);
  color: var(--qg-fg-3);
}

.qg-small {
  font-size: var(--qg-size-sm);
  color: var(--qg-fg-3);
}

.qg-micro {
  font-size: var(--qg-size-xs);
  color: var(--qg-fg-4);
}

.qg-label {
  display: block;
  font-size: var(--qg-size-sm);
  font-weight: var(--qg-weight-medium);
  color: var(--qg-fg-2);
  margin-bottom: 6px;
}

.qg-muted       { color: var(--qg-fg-3); }
.qg-helper      { font-size: var(--qg-size-xs); color: var(--qg-fg-3); margin-top: 4px; }
.qg-required    { color: var(--qg-danger); }
.qg-logo-text   { font-weight: var(--qg-weight-black); letter-spacing: var(--qg-tracking-wide); }

/* Keyframes used by buttons, spinners, success pop */
@keyframes qgSpin    { to { transform: rotate(360deg); } }
@keyframes qgFadeIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qgSlideIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes qgPop     { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }