/* Vacei — Type. Inter for everything on screen; JetBrains Mono for money,
   account codes and any tabular figure. Display sizing is Inter 600 with
   slight negative tracking — never a separate display face. */
:root {
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  /* marketing pages only — never inside the portal */
  --font-marketing: 'Outfit', 'Inter', system-ui, sans-serif;

  --fs-cover:      38px;  /* cover / page hero title                       */
  --fs-display:    30px;
  --fs-assistant:  23px;  /* assistant question                            */
  --fs-kpi:        26px;
  --fs-title:      18px;  /* topbar page title, card titles                */
  --fs-section:    15px;
  --fs-body:       13.5px;/* nav labels, prose                             */
  --fs-ui:         12.5px;
  --fs-meta:       12px;
  --fs-caption:    11.5px;
  --fs-eyebrow:    10.5px;/* uppercase group + breadcrumb labels           */

  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */
  --fw-semi:    600; /* @kind font */
  --fw-bold:    700; /* @kind font */

  --tracking-cover:   -1.1px;
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.09em;
  --tracking-crumb:   0.11em;
}

.v-display { font-family: var(--font-body); letter-spacing: var(--tracking-display); }
.v-money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.t-cover     { font-family: var(--font-body); font-size: 38px;   font-weight: 600; line-height: 1.06; letter-spacing: -1.1px; }
.t-display   { font-family: var(--font-body); font-size: 30px;   font-weight: 600; line-height: 1.15; letter-spacing: -0.6px; }
.t-assistant { font-family: var(--font-body); font-size: 23px;   font-weight: 400; line-height: 1.34; letter-spacing: -0.01em; }
.t-kpi       { font-family: var(--font-mono); font-size: 26px;   font-weight: 600; line-height: 1.1;  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.t-title     { font-family: var(--font-body); font-size: 18px;   font-weight: 600; line-height: 1.3;  letter-spacing: -0.01em; }
.t-section   { font-family: var(--font-body); font-size: 15px;   font-weight: 600; line-height: 1.4; }
.t-body      { font-family: var(--font-body); font-size: 13.5px; font-weight: 400; line-height: 1.6; }
.t-body-med  { font-family: var(--font-body); font-size: 13.5px; font-weight: 500; line-height: 1.5; }
.t-ui        { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; line-height: 1.4; }
.t-ui-semi   { font-family: var(--font-body); font-size: 12px;   font-weight: 600; line-height: 1.4; }
.t-caption   { font-family: var(--font-body); font-size: 11.5px; font-weight: 400; line-height: 1.4; }
.t-eyebrow   { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.09em; text-transform: uppercase; }
.t-crumb     { font-family: var(--font-body); font-size: 10px;   font-weight: 700; line-height: 1.3; letter-spacing: 0.11em; text-transform: uppercase; }

/* marketing type — Outfit display, tighter tracking, larger sizes */
.m-h1 { font-family: var(--font-marketing); font-size: 52px; font-weight: 500; line-height: 1.04; letter-spacing: -.035em; color: var(--ink); text-wrap: pretty; }
.m-h2 { font-family: var(--font-marketing); font-size: 36px; font-weight: 500; line-height: 1.1;  letter-spacing: -.03em;  color: var(--ink); text-wrap: pretty; }
.m-h3 { font-family: var(--font-marketing); font-size: 17px; font-weight: 600; letter-spacing: -.015em; color: var(--ink); }
.m-eyebrow { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); }
.m-lede { font-family: var(--font-body); font-size: 15.5px; line-height: 1.7; color: var(--stone); text-wrap: pretty; }
.m-body { font-family: var(--font-body); font-size: 13.5px; line-height: 1.65; color: var(--stone); text-wrap: pretty; }
@media (max-width: 760px) { .m-h1 { font-size: 36px } .m-h2 { font-size: 28px } }

/* Prose defaults — opt in by wrapping content in .v-prose */
.v-prose h1 { font-family: var(--font-body); font-weight: 600; font-size: 38px; line-height: 1.06;
  letter-spacing: -1.1px; color: var(--ink); margin: 0 0 16px; }
.v-prose h2 { font-family: var(--font-body); font-weight: 600; font-size: 24px; line-height: 1.2;
  letter-spacing: -0.4px; color: var(--ink); margin: 0 0 12px; }
.v-prose h3 { font-family: var(--font-body); font-weight: 600; font-size: 18px; line-height: 1.3;
  color: var(--ink); margin: 0 0 8px; }
.v-prose p  { font-family: var(--font-body); font-weight: 400; font-size: 13.5px; line-height: 1.6;
  color: var(--body); margin: 0 0 12px; }
.v-prose small { font-family: var(--font-body); font-size: 11.5px; line-height: 1.4; color: var(--mute); }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
.v-prose--cover h1, .v-prose--cover h2, .v-prose--cover h3 { color: #fff; }
.v-prose--cover p { color: var(--on-cover); }
.v-prose--cover a { color: #fff; text-decoration: underline; }