/* Sorvi design tokens. Every design value lives here; components never hard-code a colour.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Host+Grotesk:wght@400;500;600&family=Figtree:wght@400;500;600&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── white page, zinc-grey cards, one ink band, a black closing band */
  --bg: #FFFFFF;
  --surface: #F4F4F5;          /* bento cards, FAQ rows, editor frame */
  --surface-2: #FAFAFA;        /* inside mock-ups */
  --ink-band: #18181B;         /* statement band under the hero, nav pill, featured plan */
  --night: #09090B;            /* final CTA + footer */
  --glass: rgba(255, 255, 255, .72);
  --glass-nav: rgba(255, 255, 255, .8);
  --scrim-rgb: 12, 20, 52;     /* navy scrim over the hero photo */

  /* ── Text ── */
  --text: #18181B;
  --text-2: #3F3F46;
  --muted: #6B6B74;
  --on-dark: #FAFAFA;
  --on-dark-2: #B4B4BD;

  /* ── Lines ── */
  --line: #E4E4E7;
  --line-2: #D4D4D8;
  --line-dark: rgba(255, 255, 255, .10);

  /* ── Brand / accent (brand slots — the palette engine repaints these per business) ── */
  --accent: #6E56F8;           /* primary: glossy CTA, active states, checks */
  --accent-strong: #5A41E8;    /* hover / pressed */
  --accent-ink: #5A41E8;       /* accent used as text on white */
  --accent-soft: #ECE8FF;      /* chip fill */
  --accent-tint: #F5F3FF;      /* faint fill */
  --accent-glow: #D6CEFF;      /* glow core behind mock-ups */
  --accent-on-dark: #B3A6FF;   /* accent text on ink / night */
  --on-accent: #FFFFFF;
  --accent-rgb: 110, 86, 248;
  --sky: #0369A1;              /* secondary: feature chip + glow */
  --sky-soft: #E0F2FE;
  --sky-tint: #EEF8FF;
  --sky-glow: #B9E3FB;         /* glow core behind mock-ups */
  --peach: #AE3A0B;            /* tertiary: feature chip + glow */
  --peach-soft: #FFEDD5;
  --peach-tint: #FFF4EA;
  --peach-glow: #FFD3AE;
  --deep-1: #0D0A1F;           /* on-device AI band, top */
  --deep-2: #2B1F70;           /* on-device AI band, bottom */

  /* ── Data / status (mock-ups only) ── */
  --success: #16A34A; --warning: #D97706; --danger: #E5383B; --info: #0284C7;
  --rec: #E5383B;              /* the record dot */
  --rec-ink: #C21B1E;          /* record red used as text */
  --tl-1: #FF5F57; --tl-2: #FEBC2E; --tl-3: #28C840;   /* window traffic lights */

  /* ── Fonts ── */
  --font-display: "Host Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── */
  --r-xs: 6px;      /* chips inside mock-ups, inputs */
  --r-sm: 10px;     /* buttons */
  --r: 16px;        /* windows, small cards, nav pill */
  --r-lg: 24px;     /* bento cards, plan cards, glows */
  --r-xl: 36px;     /* the white sheet that slides over the ink band; hero frame */
  --r-pill: 9999px;

  /* ── Spacing / layout ── */
  --container: 1000px;         /* text + split rows */
  --container-wide: 1200px;    /* big window mock-ups */
  --gutter: 24px;
  --section: 160px;            /* between sections at 1440 */
  --head-gap: 64px;            /* section head → content */
  --row-gap: 140px;            /* between split rows */
  --nav-h: 56px;

  /* ── Shadows ── */
  --shadow-window: 0 40px 90px -30px rgba(24, 24, 27, .40), 0 0 0 1px rgba(24, 24, 27, .07);
  --shadow-card: 0 18px 40px -18px rgba(24, 24, 27, .22), 0 0 0 1px rgba(24, 24, 27, .06);
  --shadow-pop: 0 10px 24px -8px rgba(24, 24, 27, .25), 0 0 0 1px rgba(24, 24, 27, .06);
  --shadow-btn: inset 0 2px 0 rgba(255, 255, 255, .22), 0 2px 6px rgba(var(--accent-rgb), .30);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
}

/* ── Type scale ── headings Host Grotesk 500, body Figtree */
.t-display { font: 500 64px/1.04 var(--font-display); letter-spacing: -.035em; }
.t-h1 { font: 500 56px/1.06 var(--font-display); letter-spacing: -.032em; }
.t-h2 { font: 500 48px/1.08 var(--font-display); letter-spacing: -.03em; }
.t-h3 { font: 400 28px/1.18 var(--font-display); letter-spacing: -.035em; }
.t-h4 { font: 500 18px/1.3 var(--font-display); letter-spacing: -.01em; }
.t-lead { font: 400 18px/1.55 var(--font); letter-spacing: -.005em; }
.t-body { font: 400 16px/1.55 var(--font); }
.t-small { font: 400 14px/1.5 var(--font); }
.t-label { font: 600 13px/1.2 var(--font); letter-spacing: 0; }
.t-num { font: 500 56px/1 var(--font-display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

h1, h2, h3, h4 { text-wrap: balance; }

@media (max-width: 900px) {
  .t-display { font-size: 48px; }
  .t-h1 { font-size: 44px; }
  .t-h2 { font-size: 38px; }
  .t-h3 { font-size: 24px; }
}
@media (max-width: 560px) {
  .t-display { font-size: 40px; line-height: 1.06; }
  .t-h1 { font-size: 36px; }
  .t-h2 { font-size: 32px; line-height: 1.1; }
  .t-lead { font-size: 17px; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }