/* Slobal type and button layer, 2026-11-08.
 *
 * One stylesheet, linked LAST on every Home/site page, so it wins over the
 * page's own inline chrome rules and over ui.css. It sets the shared rules
 * that slobal.com, agncred.com and the Helmsly web pages now follow:
 *
 *   TYPE      One sans face, Geist, for every word. Headings weight 500,
 *             sentence case, tight tracking. Mono only for code and data.
 *   COLOUR    Three text levels: ink (headings, names, buttons), grey (body),
 *             light grey (the second half of a headline, labels, "coming soon").
 *   BUTTONS   Pill shape. Large 48px high, 16px/500 label, 20px side padding.
 *             Small (nav, tables) 36px high, 14px/500 label, 16px side padding.
 *   SOURCE    Measured live from the reference site on vps002, 2026-11-08
 *             (/mnt/project-files/SPEC.md): headings weight 400, -0.02em
 *             tracking, line height under 1.0, pill buttons, 14px grey eyebrow.
 *             Filled (one per view), outline, and text link. Nothing else.
 *
 * Colours stay the brand's: Slobal teal for the one filled primary, the navy
 * night for dark surfaces. Animations are not touched here.
 *
 * The one-primary gate (docs/audit/scripts/primary-check.mjs) reads this file.
 * No rule here gives a button a var(--primary) ground: the page's own .fill
 * (the platform band) stays its one filled primary.
 */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-ds] {
  --sans: "Geist", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: var(--sans);
  --font-display: var(--sans);
  /* --mono stays Geist Mono, for code and data only. */

  --text-ink: #0A0E1A;
  --text-grey: #4B5563;
  --text-light: #7C8595;
  --text-on-dark: #F4F6F9;
  --text-on-dark-grey: #A3ABBA;

  --btn-h: 48px;
  --btn-h-sm: 36px;
  --btn-px: 20px;
  --btn-px-sm: 16px;
  --btn-fs: 16px;
  --btn-fs-sm: 14px;
  --btn-radius: 999px;
}

/* ---------- Base type ---------- */
body,
.ds-page {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-grey);
  font-feature-settings: "ss01" 0;
}

.ds-h1, .ds-h2, .ds-h3,
:where(.ds-page) h1, :where(.ds-page) h2, :where(.ds-page) h3,
h1, h2, h3 {
  font-family: var(--sans);
  font-weight: 400;
  color: var(--text-ink);
  text-wrap: balance;
}

.ds-h1, :where(.ds-page) h1, main h1 {
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.ds-h2, :where(.ds-page) h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.ds-h3, :where(.ds-page) h3, .ds-card-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--text-ink);
}

/* Legal and FAQ documents: a reading column, so section headings sit smaller. */
main :where(h2) { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.02em; }

.ds-body, :where(.ds-page) p, main p, main li {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-grey);
}

.ds-section-note, .lead {
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-grey);
}

/* The second half of a headline, in light grey. */
.tone { color: var(--text-light); }

/* Small label above a heading: plain words, light grey, a hairline above. */
.ds-eyebrow {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-light);
}
@media (max-width: 600px) { .ds-eyebrow { font-size: 12px; } }

/* Section rhythm: more air between sections, as on the reference. */
.section, .contact { padding-block: 112px; }
@media (max-width: 720px) { .section, .contact { padding-block: 80px; } }

.ds-section-head {
  max-width: none;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.ds-section-head > p { max-width: 40em; }

.ds-section-head h2 { margin-top: 28px; }

/* Labels in spec lists and tables: sentence case, light grey, no mono. */
.ds-spec-label,
.ds-table th,
.ds-kpi-label {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-light);
}

.ds-spec-value, .ds-card-body, .ds-table td { color: var(--text-grey); font-family: var(--sans); }

/* Badges: sentence case, no tracking. */
.ds-badge {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* ---------- Buttons ---------- */
.ds-btn, .ds-btn-secondary, .ds-btn-ghost,
.actions .ghost, .actions .fill,
.btn, .btn-line, .btn-fill,
.hero-cta a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  height: auto;
  padding: 0 var(--btn-px);
  border-radius: var(--btn-radius);
  font-family: var(--sans);
  font-size: var(--btn-fs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .28s cubic-bezier(.34,1.56,.64,1), background-color .17s ease, border-color .17s ease, color .17s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .actions .ghost:active, .actions .fill:active, .btn-line:active, .btn-fill:active, .hero-cta a:active, .ds-btn:active { transform: scale(.97); }
}

.ds-btn-sm,
.nav .btn-line, .nav .btn-fill,
.site-head .btn-line, .site-head .btn-fill {
  min-height: var(--btn-h-sm);
  padding: 0 var(--btn-px-sm);
  font-size: var(--btn-fs-sm);
}

/* Outline: ink label, hairline ring. */
.actions .ghost,
.nav .btn-line, .site-head .btn-line {
  background: transparent;
  color: var(--text-ink);
  border: 1px solid var(--text-ink);
}
.actions .ghost:hover,
.nav .btn-line:hover, .site-head .btn-line:hover {
  border-color: var(--teal);
  color: var(--teal);
}

/* Header Register: a dark navy pill. It is not var(--primary), so the page's
 * one filled primary stays the platform band's Register. */
.nav .btn-fill, .site-head .btn-fill {
  background: var(--night);
  color: var(--surface);
  border: 1px solid var(--night);
}
.nav .btn-fill:hover, .site-head .btn-fill:hover {
  background: var(--teal);
  border-color: var(--teal);
  color: var(--surface);
}

.actions .fill { border: 1px solid transparent; }

/* ---------- Header ---------- */
.nav, .site-head nav {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
}
.nav > a, .dd > a, .nav summary, .site-head nav a:not(.btn-line):not(.btn-fill) {
  color: var(--text-ink);
}

/* Dropdown panels: same face, sentence case. */
.dd .panel a, .menu .panel a {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

@media (max-width: 600px) {
  .nav, .site-head nav { font-size: clamp(11px, 3.2vw, 14px); letter-spacing: 0; }
  .nav .btn-line, .nav .btn-fill,
  .site-head .btn-line, .site-head .btn-fill {
    min-height: 32px;
    padding: 0 clamp(8px, 2.6vw, 14px);
    font-size: clamp(11px, 3.2vw, 13px);
  }
}

/* ---------- Footer ---------- */
.site-foot nav,
.site-foot .foot-h {
  font-family: var(--sans);
  letter-spacing: 0;
  text-transform: none;
}
.site-foot .foot-h {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-on-dark-grey);
}
.site-foot nav a {
  font-size: 15px;
  color: var(--text-on-dark);
}
.site-foot nav a:hover { color: var(--light); }
.site-foot .foot-group {
  border-left: 1px solid var(--ink-line);
  padding-left: 16px;
}
.site-foot .legal {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--text-on-dark-grey);
}
.site-foot .legal a { color: var(--text-on-dark-grey); }