/* Valuables® Design Tokens · v2.0 — Doll register
   §CO-2026.05.B amendment to Brand Guidelines v1.0
   ─────────────────────────────────────────────────────────
   One face. Two values. One editorial gesture per page.
   ───────────────────────────────────────────────────────── */

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700;800&display=swap");

/* Helvetica Neue is canonical for the entire system. Inter Tight is
   the closest neo-grotesk Google Fonts proxy for web preview only.
   Production builds must license Helvetica Neue (Linotype). All other
   typeface families — Tiempos, Söhne, JetBrains Mono, Ogg, Beatrice,
   Ivy Presto Display — are retired per §CO-2026.05.B Domain 01. */

@font-face {
  font-family: "HN Proxy";
  src: local("Helvetica Neue"), local("HelveticaNeue"),
       local("Helvetica"), local("Inter Tight");
  font-weight: 100 900;
  font-style: normal italic;
  font-display: swap;
}

:root {
  /* ── COLOR · Two values + hairline ─────────────────────────
     Per §CO-2026.05.B Domain 02. High contrast is the system.
     No accents, no tints, no paper colors, no editorial red.
     The hairline is structure, not decoration. Retired tokens
     (navy, soft-blue, eggshell, red, muted, card) collapse to
     these three so legacy pages continue to resolve. */
  --val-paper:    #FFFFFF;
  --val-black:    #000000;
  --val-hairline: #E5E5E5;

  /* Legacy aliases — every retired token resolves to one of the
     three canonical values. Do not introduce new aliases. */
  --val-surface:    var(--val-paper);
  --val-near-black: var(--val-black);
  --val-navy:       var(--val-black);     /* retired → black */
  --val-soft-blue:  var(--val-black);     /* retired → black */
  --val-eggshell:   var(--val-paper);     /* retired → paper */
  --val-red:        var(--val-black);     /* retired → black */
  --val-rule:       var(--val-hairline);
  --val-card:       var(--val-paper);
  --val-muted:      var(--val-black);
  --val-blue:       var(--val-black);
  --val-ink:        var(--val-black);
  --val-body:       var(--val-black);
  --val-mist:       var(--val-hairline);
  --val-stone:      var(--val-black);
  --val-trace:      var(--val-hairline);
  --val-surface-2:  var(--val-paper);
  --val-stock:      var(--val-paper);
  --val-accent-blue: var(--val-black);
  --val-accent-blue-tint: var(--val-paper);
  --val-ice:        var(--val-paper);

  /* ── TYPOGRAPHY · One face ─────────────────────────────────
     Helvetica Neue, every weight. Inter Tight as web proxy. */
  --font-system:  "Helvetica Neue", "HelveticaNeue", "HN Proxy", "Inter Tight", Helvetica, Arial, sans-serif;
  --font-body:    var(--font-system);
  --font-display: var(--font-system);
  --font-meta:    var(--font-system);
  --font-mono:    var(--font-system);     /* retired alias */
  --font-serif:   var(--font-system);     /* retired alias */
  --font-italic:  var(--font-system);     /* retired alias */
  --font-sans:    var(--font-system);
  --font-valuables: var(--font-system);

  /* Type scale — principal-name treatment + regulatory body */
  --t-principal-cover:   236px;  /* principal name as page object, cover */
  --t-principal-inner:   144px;  /* principal name as section opener */
  --t-stamp:             120px;  /* black-panel stamp numerals & wordmarks */
  --t-display:            64px;
  --t-h1:                 34px;
  --t-h2:                 26px;
  --t-h3:                 19px;
  --t-body:               16px;
  --t-small:              14px;
  --t-caption:            12px;
  --t-eyebrow:            10px;  /* spaced caps small */
  --t-meta:               10px;  /* spaced caps small */

  /* Tracking */
  --tk-principal: -0.055em;
  --tk-display:   -0.022em;
  --tk-h1:        -0.018em;
  --tk-h2:        -0.012em;
  --tk-caps:      0.14em;
  --tk-caps-wide: 0.18em;

  /* Line heights */
  --lh-principal: 0.86;
  --lh-display:   1.05;
  --lh-snug:      1.2;
  --lh-body:      1.55;

  /* Tabular numerics — mandatory for every number */
  --tabular: "tnum" on, "lnum" on;

  /* ── SPACING · 4pt scale ─────────────────────────────────── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;

  /* ── STRUCTURE ───────────────────────────────────────────── */
  --radius:    0;        /* no rounding. discipline. */
  --radius-lg: 0;
  --rule-w:    1px;
  --max-text:  68ch;
}

/* ── BASE ─────────────────────────────────────────────────── */
html { font-size: 16px; }
body {
  font-family: var(--font-system);
  font-feature-settings: var(--tabular);
  color: var(--val-black);
  background: var(--val-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

/* ── PRINCIPAL-NAME TREATMENT · the page is the name ──────
   The single editorial gesture of the system. Used on covers
   and section openers. Massive sans, terminal period set in
   weight 400. Hairlines above and below. Only object on the
   page. */
.t-principal {
  font-family: var(--font-system);
  font-weight: 500;
  font-size: var(--t-principal-cover);
  letter-spacing: var(--tk-principal);
  line-height: var(--lh-principal);
  color: var(--val-black);
  margin: 0;
}
.t-principal--inner { font-size: var(--t-principal-inner); }
.t-principal .terminal-period { font-weight: 400; }

/* ── DISPLAY & SCALE ──────────────────────────────────────── */
.t-display { font-family: var(--font-system); font-weight: 500; font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tk-display); }
.t-h1      { font-size: var(--t-h1); font-weight: 500; line-height: 1.15; letter-spacing: var(--tk-h1); margin: 0; }
.t-h2      { font-size: var(--t-h2); font-weight: 500; line-height: var(--lh-snug); letter-spacing: var(--tk-h2); margin: 0; }
.t-h3      { font-size: var(--t-h3); font-weight: 500; line-height: 1.3; margin: 0; }
.t-body    { font-size: var(--t-body); line-height: var(--lh-body); margin: 0; }
.t-small   { font-size: var(--t-small); line-height: 1.5; margin: 0; }
.t-caption { font-size: var(--t-caption); line-height: 1.4; margin: 0; }
.t-eyebrow { font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps); text-transform: uppercase; font-weight: 500; }
.t-meta    { font-size: var(--t-meta); letter-spacing: var(--tk-caps); text-transform: uppercase; font-weight: 500; }
.t-num     { font-variant-numeric: tabular-nums lining-nums; font-weight: 500; }

/* ── ITALIC ANCHOR · one gesture, at close ───────────────── */
.t-anchor {
  font-family: var(--font-system);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: 0;
  margin: 0;
  padding-top: var(--s-4);
  border-top: 1px solid var(--val-black);
  max-width: 64ch;
}

/* ── PAGE CHROME · regulatory-document conventions kept ──── */
.page {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-9);
}
.rule      { border: 0; border-top: var(--rule-w) solid var(--val-black);    margin: var(--s-5) 0; }
.rule-soft { border: 0; border-top: var(--rule-w) solid var(--val-hairline); margin: var(--s-5) 0; }
.rule-hair { border: 0; border-top: var(--rule-w) solid var(--val-hairline); }

.header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--val-black);
  margin-bottom: var(--s-7);
}
.header__mark {
  font-family: var(--font-system); font-weight: 500;
  font-size: 11px; letter-spacing: var(--tk-caps); text-transform: uppercase;
  color: var(--val-black);
}
.header__mark sup { font-size: 0.7em; vertical-align: super; }
.header__meta {
  display: flex; gap: var(--s-5);
  font-size: var(--t-meta); letter-spacing: var(--tk-caps); text-transform: uppercase;
  color: var(--val-black); font-variant-numeric: tabular-nums;
}
.header__meta b { font-weight: 500; }

.section-eyebrow {
  font-size: var(--t-eyebrow); letter-spacing: var(--tk-caps); text-transform: uppercase;
  color: var(--val-black); font-weight: 500;
  margin-bottom: var(--s-3);
}

/* Foot breadcrumb · §N · TITLE · pp/total */
.foot-breadcrumb {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: var(--s-4);
  border-top: 1px solid var(--val-hairline);
  font-size: var(--t-meta); letter-spacing: var(--tk-caps); text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ── STAMP SURFACE · the one black-page moment ─────────────
   Covers, metric panels, closing blocks. Inverts the binary;
   reader registers it as "the stamp." Not a default surface. */
.on-stamp {
  background: var(--val-black);
  color: var(--val-paper);
}
.on-stamp .header,
.on-stamp .foot-breadcrumb,
.on-stamp .rule           { border-color: var(--val-paper); }
.on-stamp .rule-hair,
.on-stamp .rule-soft      { border-color: rgba(255,255,255,0.25); }
.on-stamp .header__mark,
.on-stamp .header__meta,
.on-stamp .section-eyebrow,
.on-stamp .t-meta,
.on-stamp .t-eyebrow      { color: var(--val-paper); }

/* ── HAIRLINE & DISCLOSURE ────────────────────────────────── */
hr {
  border: 0; border-top: 1px solid var(--val-black); margin: var(--s-5) 0;
}
.disclosure {
  border-top: 1px solid var(--val-black);
  padding-top: var(--s-4);
  margin-top: var(--s-8);
  font-size: var(--t-caption);
  color: var(--val-black);
  line-height: 1.5;
  max-width: 80ch;
}

/* ── LINKS · hairline underline, no color shift ──────────── */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--val-black);
}
a:hover { border-bottom-width: 2px; }

/* ── SELECTION · pure binary ──────────────────────────────── */
::selection { background: var(--val-black); color: var(--val-paper); }
