/* Vektr type, defined once (D99). Three fonts, each with a job; the rules are in planning/BRAND_GUIDE.md section 7.
   Exo 2 = display (headings, the score, names of things), Figtree = everything you read and tap, Geist Mono = facts and small labels.
   Pages load this file after colors.css and use the role variables or classes below instead of naming fonts and weights themselves. */
@import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@200;300;500&family=Figtree:wght@400;600&family=Geist+Mono:wght@400;500&display=swap");

:root {
  --font-display: "Exo 2", "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-data: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* weights: display is thin or medium; body is regular or semibold; never bold */
  --w-thin: 200; --w-light: 300; --w-medium: 500;
  --w-read: 400; --w-strong: 600;
}

/* Statement: the first half of a page heading, about the person. Thin, in ink. */
.t-statement { font-family: var(--font-display); font-weight: var(--w-thin); letter-spacing: -.02em; line-height: 1.12; color: var(--ink); text-wrap: balance; }
/* Vektr's voice: the second half of a heading, what Vektr does. Medium, in Vektr blue. */
.t-voice { font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: -.02em; font-style: normal; color: var(--link); }
/* Big number: the score, or the number that is the point of the screen. */
.t-score { font-family: var(--font-display); font-weight: var(--w-thin); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
/* Name: role titles, a person's name, the profile card's title. */
.t-name { font-family: var(--font-display); font-weight: var(--w-medium); letter-spacing: -.02em; line-height: 1.2; }
/* Verdict: Vektr's judgment in a word or two ("Good fit", "Set aside"). Blue, or vermilion for a warning. */
.t-verdict { font-family: var(--font-body); font-weight: var(--w-strong); color: var(--link); }
/* Data: facts with units (pay, minutes, dates, addresses). */
.t-data { font-family: var(--font-data); font-weight: 400; font-variant-numeric: tabular-nums; }
/* Label: small uppercase labels and eyebrows. */
.t-label { font-family: var(--font-data); font-weight: 500; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
/* Question: every question put to the person (onboarding first; app, Settings and Career profile follow). Reading face, semibold, 19 px, ink (T-265). */
.t-question { font-family: var(--font-body); font-weight: var(--w-strong); font-size: 19px; line-height: 1.3; color: var(--ink); }
