/* ============================================================================
   Polymorphic VDR — base layer
   Reset, typographic primitives, and the small set of utilities that enforce
   the spec's discipline. Component styling lives in app.css.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul {
  margin: 0;
  padding: 0;
}
ol, ul { list-style: none; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Set on the root, not only on body: otherwise the document element keeps
     the UA default family and anything that inherits from it (form controls,
     dialogs) starts from the wrong stack. */
  font-family: var(--font-sans);
}

body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--porcelain);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Financial credibility detail (§33): figures align in columns everywhere. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1, 'cv05' 1;
}

img, svg, canvas, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* --- Focus (§41: sophisticated focus states) -----------------------------
   Visible, precise, cyan — never a fuzzy glow (§13). */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 1px;
}

/* ============================================================================
   Typographic primitives (§7)
   Named for their role in the document, not their appearance.
   ========================================================================= */

.t-deal {
  font-family: var(--font-serif);
  font-size: var(--t-deal);
  font-weight: var(--w-regular);   /* never bold (§7) */
  letter-spacing: var(--track-tight);
  line-height: 1.06;
}

.t-page {
  font-size: var(--t-page);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-tight);
  line-height: 1.15;
}

.t-section {
  font-size: var(--t-section);
  font-weight: var(--w-medium);
  line-height: 1.25;
}

.t-body   { font-size: var(--t-body); font-weight: var(--w-regular); }
.t-body-s { font-size: var(--t-body-sm); font-weight: var(--w-regular); }

/* Metadata: 11–12px, 500, uppercase, tracked (§7) */
.t-meta {
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--slate);
}

/* Micro label: 10px, 500, 0.16em — e.g. DOCUMENT INDEX. Never bold (§7). */
.t-micro {
  font-size: var(--t-micro);
  font-weight: var(--w-medium);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  color: var(--slate);
}

/* Major financial figure (§34): 42px sans regular, no card around it. */
.t-figure {
  font-size: var(--t-figure);
  font-weight: var(--w-regular);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Editorial serif for opening statements and pull quotes (§6) */
.t-editorial {
  font-family: var(--font-serif);
  font-weight: var(--w-regular);
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--graphite);
}

/* --- Colour roles --------------------------------------------------------- */
.c-ink      { color: var(--ink); }
.c-graphite { color: var(--graphite); }
.c-slate    { color: var(--slate); }
.c-cyan     { color: var(--cyan); }
.c-gold     { color: var(--gold); }

/* --- Rules (§12) — structure comes from hairlines, not shadows ----------- */
.rule        { border-top: 1px solid var(--rule); }
.rule-strong { border-top: 1px solid var(--rule-strong); }

/* ============================================================================
   Utilities
   ========================================================================= */

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.num { font-variant-numeric: tabular-nums lining-nums; }
.num-right { text-align: right; font-variant-numeric: tabular-nums lining-nums; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Dark environment (§39): auth, viewer, command surfaces — not an inversion. */
.env-dark {
  background: var(--obsidian);
  color: var(--ink-inverse);
}
.env-dark .c-slate    { color: var(--slate-dark); }
.env-dark .c-graphite { color: var(--graphite-dark); }
.env-dark .t-meta,
.env-dark .t-micro    { color: var(--slate-dark); }
.env-dark .rule       { border-top-color: var(--rule-dark); }

/* ============================================================================
   Brand lockup (§3) — Montserrat lives HERE and nowhere else.
   ========================================================================= */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.brand-name {
  font-family: var(--font-logo);
  font-weight: 600;
  letter-spacing: var(--track-logo);
  color: var(--ink-inverse);
  font-size: 15px;
}
.brand-sub {
  font-family: var(--font-logo);
  font-weight: 300;
  font-size: 8px;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 4px;
  text-indent: 0.05em;
}
.brand--light .brand-name { color: var(--ink); }