/* ============================================================
   COVERA — Insurance Funnel Design System
   colors_and_type.css  · base tokens + semantic styles
   ============================================================
   Original system inspired by proven life-insurance funnel UX
   patterns. Warm paper, editorial serif display, humanist sans
   UI, confident royal-blue trust accent.
   ============================================================ */

/* ---- Fonts (Google Fonts CDN — see README font note) ---- */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root {
  /* ---------- BRAND PALETTE ---------- */
  --paper:        #F7F4EE; /* warm bone — app/marketing background */
  --paper-2:      #F1ECE2; /* slightly deeper warm panel */
  --surface:      #FFFFFF; /* cards, inputs, sheets */

  --ink:          #17203A; /* primary text + primary CTA fill */
  --ink-2:        #4A5268; /* secondary text, labels */
  --ink-3:        #858BA0; /* muted text, placeholders, captions */

  --royal:        #244BD6; /* signature brand — CTA accents, progress, selected */
  --royal-dark:   #1A38A8; /* pressed / hover-dark */
  --royal-tint:   #EAEEFC; /* selected card bg, info callout bg */
  --royal-tint-2: #DCE3FB; /* selected card border tint */

  --clay:         #D9774A; /* warm spot accent — badges, illustration, highlights */
  --clay-tint:    #FBEEE6;

  --success:      #1E7F5C; /* checks, positive */
  --success-tint: #E4F2EC;
  --warning:      #B4791B;
  --danger:       #C0392B;

  --border:       #E5DFD4; /* warm hairline */
  --border-2:     #D8D0C2; /* stronger divider */
  --field-border: #CFC8BB; /* input outline at rest */

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display:   clamp(34px, 8.5vw, 56px); /* @kind font */ /* hero marketing — fluid */
  --fs-h1:        clamp(27px, 7vw, 38px);   /* @kind font */ /* funnel question heading — fluid */
  --fs-h2:        clamp(23px, 5.5vw, 28px); /* @kind font */
  --fs-h3:        21px;
  --fs-lead:      19px; /* sub-question / lead paragraph */
  --fs-body:      17px;
  --fs-sm:        15px;
  --fs-xs:        13px;
  --fs-eyebrow:   12px; /* uppercase labels */

  /* ---------- 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;

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

  /* ---------- ELEVATION ---------- */
  --shadow-xs: 0 1px 2px rgba(23,32,58,.05);
  --shadow-sm: 0 2px 6px rgba(23,32,58,.06);
  --shadow-md: 0 8px 24px rgba(23,32,58,.08);
  --shadow-lg: 0 18px 48px rgba(23,32,58,.12);
  --shadow-focus: 0 0 0 4px rgba(36,75,214,.16);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.2,.7,.3,1); /* @kind other */
  --dur:  180ms; /* @kind other */
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Use as a base layer; components compose on top.
   ============================================================ */

.cv-display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.cv-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.cv-h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--ink);
}
.cv-h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--ink);
}
.cv-lead {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
}
.cv-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  color: var(--ink-2);
}
.cv-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--ink-2);
}
.cv-eyebrow {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cv-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

a.cv-link {
  color: var(--royal);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
a.cv-link:hover { color: var(--royal-dark); }

html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* ============================================================
   MULTI-BRAND ACCENTS
   Three PingPost brands share one layout system. Components
   reference --accent*; a body class swaps the brand.
   CoverageFlow (insurance, default) · Hearthline (home services)
   · Clearlane (personal finance)
   ============================================================ */
:root{--accent:var(--royal);--accent-dark:var(--royal-dark);--accent-tint:var(--royal-tint);--accent-tint-2:var(--royal-tint-2);--focus-ring:rgba(36,75,214,.16);}
.brand-coverageflow{--accent:var(--royal);--accent-dark:var(--royal-dark);--accent-tint:var(--royal-tint);--accent-tint-2:var(--royal-tint-2);--focus-ring:rgba(36,75,214,.16);}
.brand-hearthline{--accent:#BE5327;--accent-dark:#96401E;--accent-tint:#FAECE2;--accent-tint-2:#F2D9C6;--focus-ring:rgba(190,83,39,.16);}
.brand-clearlane{--accent:#17805F;--accent-dark:#0F6349;--accent-tint:#E3F1EA;--accent-tint-2:#CDE6DA;--focus-ring:rgba(23,128,95,.16);}