/* ============================================================
   Convy · Colors & Type
   Source of truth: https://convy.space (style-D-rz0lmX.css)
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Color: neutrals (cool, slightly blue-tinted) ---------- */
  --bg:           #ffffff;  /* page background */
  --paper:        #f7f9fc;  /* sub-surface: report/CTA sections */
  --paper-2:      #eef3fb;  /* inner mock lines / skeleton fill */

  --ink:          #0b1220;  /* h1-h4, primary action, logo color */
  --ink-2:        #1a2440;  /* body on tinted surfaces */
  --body:         #2a3656;  /* default body text */
  --muted:        #6b7794;  /* secondary body / labels */
  --muted-2:      #95a0b8;  /* placeholder text, tertiary */

  --rule:         #e6ecf5;  /* default hairline */
  --rule-strong:  #d6dfee;  /* inputs, ghost button border, dot rows */

  /* ---------- Color: brand accent (purple) ---------- */
  --accent:        #5e30eb;  /* primary accent */
  --accent-ink:    #4f29c8;  /* hover/pressed, accent text on light tint */
  --accent-soft:   #e8e2fc;  /* chip bg, icon bg, flagged overlay */
  --accent-softer: #f7f5fe;  /* issue-fix callout bg, focus bg */

  /* ---------- Color: semantic ---------- */
  --ok:            #0f766e;  /* teal, reserved for positive */
  --danger:        #b91c1c;  /* form-error red */

  /* ---------- Typography ---------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Base body */
  --fs-body: 16.5px;
  --lh-body: 1.6;
  --ls-body: -0.005em;

  /* Scale (observed) */
  --fs-hero: clamp(34px, 4vw, 54px);   /* hero h1 */
  --fs-section: clamp(32px, 3.8vw, 48px); /* section h2 */
  --fs-lg:   20px;   /* card h3 (diff) */
  --fs-md:   19px;   /* flow-step h3 */
  --fs-reg:  17px;   /* section-lede, hero-sub, summary */
  --fs-body-sm: 15px;
  --fs-caption: 14px;
  --fs-eyebrow: 12px;
  --fs-micro: 11px;

  /* Weights */
  --fw-reg: 400;
  --fw-med: 500;   /* headings & most UI weight */
  --fw-semi: 600;  /* logo / brand only */

  /* Letter spacing */
  --ls-heading: -0.022em;
  --ls-hero: -0.028em;
  --ls-section: -0.025em;
  --ls-eyebrow: 0.12em;  /* UPPERCASE mono eyebrows */

  /* ---------- Radii ---------- */
  --r-xs: 5px;   /* mock inputs */
  --r-sm: 6px;   /* tags, sev chips, mock-cta */
  --r-md: 8px;   /* nav links */
  --r-lg: 10px;  /* buttons, mock cards */
  --r-xl: 12px;  /* inputs, form success */
  --r-2xl: 14px; /* cards, plans, flow steps */
  --r-3xl: 16px; /* analyzer frame */

  /* ---------- Spacing (observed rhythm) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 28px;
  --sp-8: 32px;
  --sp-10: 48px;
  --sp-12: 56px;
  --sp-14: 72px;  /* default section padding */
  --sp-18: 88px;  /* CTA section */

  /* ---------- Layout ---------- */
  --wrap: 1160px;
  --wrap-narrow: 820px;
  --wrap-pad: 28px;

  /* ---------- Shadows ---------- */
  /* Analyzer frame: large, deep, brand-tinted */
  --shadow-hero: 0 40px 80px -50px #0b122040, 0 0 0 1px #5e30eb08;
  /* Accent button lift */
  --shadow-accent: 0 8px 20px -10px #5e30eb80;
  /* Feature plan ring */
  --shadow-ring: 0 0 0 3px var(--accent-softer);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-travel: cubic-bezier(.4,.1,.3,1);
  --dur-micro: .14s;
  --dur-sm:    .18s;
  --dur-md:    .4s;
  --dur-lg:    .7s;
}

/* ============================================================
   Base + semantic type
   ============================================================ */

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
}

h1, h2, h3, h4 {
  color: var(--ink);
  letter-spacing: var(--ls-heading);
  margin: 0;
  font-weight: var(--fw-med);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Semantic utility classes (optional, for prototyping) */
.ds-hero-title    { font-size: var(--fs-hero);    line-height: 1.05; letter-spacing: var(--ls-hero); font-weight: var(--fw-med); }
.ds-section-title { font-size: var(--fs-section); line-height: 1.1;  letter-spacing: var(--ls-section); font-weight: var(--fw-med); }
.ds-title         { font-size: var(--fs-lg);      line-height: 1.3;  letter-spacing: -0.02em; font-weight: var(--fw-med); }
.ds-lede          { font-size: var(--fs-reg);     color: var(--muted); line-height: 1.5; }
.ds-body          { font-size: var(--fs-body-sm); color: var(--body); }
.ds-caption       { font-size: var(--fs-caption); color: var(--muted); }

.ds-mono          { font-family: var(--font-mono); letter-spacing: 0; }

.ds-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--fw-med);
}