/* Covenda unified type system (§14) — the SINGLE source of truth for the font families and
   one named type scale, linked by marketing, portal, and admin (same pattern as the one-SVG
   logo).

   ── WHY THIS IS NOT A SERIF ANY MORE ────────────────────────────────────────────────────
   It was Newsreader over Manrope on a warm cream ground. That is the exact combination
   AI-generated sites converge on, and readers told us so unprompted: an editorial Google
   serif for headings, one of the three "safe" geometric sans faces for body, amber accent on
   cream. The layout was never the problem; the type was.

   Geist is Vercel's typeface, free under the SIL OFL. It is a modern neo-grotesque: the same
   family tree as TWK Lausanne, which flysoar.ai uses and which is commercial and would have to
   be licensed. Cluely uses Geist directly. So one free face matches both references.

   IBM Plex Mono handles data, tiers and reference codes. That pairing suits what Covenda
   actually is, a record of verified work, far better than a magazine serif did.

   ── AND WHY A SERIF CAME BACK, FOR DISPLAY ONLY ─────────────────────────────────────────
   EB Garamond, at display sizes only, which is exactly how Cluely uses it alongside Geist.
   This is not a return to the thing that read as AI-generated: that was an editorial serif
   doing ALL the headings over a warm cream ground. An old-style serif used only at the very
   largest sizes, over a cool ground, with a neo-grotesque carrying every other level, is a
   different treatment and a much older one.

   The rule is size, not importance. --font-display is the serif and applies to hero and
   section headlines; --font-sans carries h3 downward, every label, and all UI chrome. A serif
   at 15px is where this goes wrong.

   Headline weight is 700 rather than the 400 a serif wanted: the same number that reads as a
   considered headline in Newsreader reads as unfinished in a sans.

   Display tracking is tight and negative, between -.03em and -.045em. That is the header
   treatment on the sites referenced: large, tight, and set in the same face as the body rather
   than a contrasting display family. */
:root {
  --font-display: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --font-sans: "Geist", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Geist", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── FIVE SIZES. NOT SIX. ─────────────────────────────────────────────────────────────
     The audit found 125 distinct font-size values across 1,430 declarations, of which 137
     used a token. 78 of those values appeared exactly once: clamp(19px, 1.65vw, 25px),
     clamp(9.5px, .82cqw, 11.5px), 43px, 1.14em. That is not a scale, it is a pile, and it
     is the mechanical reason the site read as cluttered: nothing lined up because no two
     components agreed on what "a card title" was.

     Each token is permanently bound to ONE role. A section header is the same size on every
     page, no exceptions. Line-height and letter-spacing are bound to the size rather than
     set per component, because the previous 27 line-heights and 36 letter-spacings included
     seven near-identical negative tracking values (-.008, -.012, -.015, -.018, -.033,
     -.038, -.043) that no eye can tell apart.

     Each size is a single clamp() so one role still scales from 375px to desktop. That is
     five roles with a range each, not ten sizes. */
  --text-display: clamp(38px, 6.2vw, 72px);   /* page headline, one per screen */
  --text-heading: clamp(26px, 3.2vw, 40px);   /* section headers */
  --text-subhead: clamp(17px, 1.5vw, 20px);   /* sub-sections, card titles */
  --text-body: clamp(15px, 1.1vw, 16px);      /* all paragraph and list text */
  --text-caption: 12.5px;                     /* labels, metadata, footnotes */

  --lh-display: 1.06;
  --lh-heading: 1.1;
  --lh-subhead: 1.3;
  --lh-body: 1.6;
  --lh-caption: 1.45;

  --ls-display: -.035em;
  --ls-heading: -.025em;
  --ls-subhead: -.015em;
  --ls-body: 0;
  --ls-caption: .01em;
  /* Uppercase micro-labels need tracking opened up or they set solid. Same size token. */
  --ls-caption-caps: .1em;

  /* Not a sixth size. An optical correction: the display serif sets visually smaller than the
     grotesque at the same point size, so a serif word inside a sans line needs nudging up to
     match its neighbours. Relative on purpose, so it tracks whatever role it sits in. */
  --optical-serif: 1.14em;

  /* ── THREE WEIGHTS. ───────────────────────────────────────────────────────────────────
     Was 19, of which 15 were one-offs (520, 560, 570, 580, 620, 640, 680, 720, 750, 760,
     800). Weight is never a substitute for size: the role carries both. */
  --weight-regular: 400;
  --weight-medium: 550;
  --weight-bold: 700;

  /* ── MOTION. ─────────────────────────────────────────────────────────────────────────
     One curve, two durations. No bounce, no spring. Scattered easings are a large part of
     what reads as generated. */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur: 220ms;

  /* Body text is held to a readable measure rather than the full column width. */
  --measure: 68ch;
}

/* Five roles, five classes. Each binds family, weight, size, measure and tracking together so
   a role cannot be half-applied. The old set had ten classes pointing at ten --step-* tokens,
   which is how a "card title" ended up meaning six different sizes. */
.t-display { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-display); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.t-heading { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: var(--text-heading); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.t-subhead { font-family: var(--font-sans); font-weight: var(--weight-medium); font-size: var(--text-subhead); line-height: var(--lh-subhead); letter-spacing: var(--ls-subhead); }
.t-body { font-family: var(--font-body); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); }
.t-caption { font-family: var(--font-body); font-weight: var(--weight-medium); font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption); }
/* An uppercase caption is the same size role with tracking opened up, not a sixth size. */
.t-eyebrow { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-caption); line-height: var(--lh-caption); letter-spacing: var(--ls-caption-caps); text-transform: uppercase; }
/* Reserved for text read character by character: reference codes, timers, counts. */
.t-mono { font-family: var(--font-mono); }

/* Running text is held to a readable measure rather than the column it happens to sit in. */
.t-body, .t-measure { max-width: var(--measure); }

/* ---- §15 shared "elite" select (every dropdown, all surfaces) --------------------------
   One consistent, considered control instead of the browser default: custom gold chevron
   (inline SVG), calm 1px hairline, gold hover + focus ring, no native arrow. The OPEN list
   is OS-rendered and can't be styled from CSS — the control itself carries the brand. */
select {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-height: 44px;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--line-strong, #c4c9cf);
  border-radius: 0;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238d5b0f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 40px !important;
  color: var(--ink, #0e1013);
  font: inherit;
  font-size: var(--text-body);
  line-height: var(--lh-subhead);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
select:hover { border-color: var(--gold, #b47b20); }
select:focus { outline: 0; border-color: var(--gold, #b47b20); box-shadow: 0 0 0 3px rgba(180,123,32,.12); }
select:disabled { opacity: .55; cursor: not-allowed; }