/* Dusk — base stylesheet for the Poppy Room design system.
   Import order: tokens/dusk.css first, then this file.
   Font paths assume this file is served with ../fonts/ reachable; adjust
   the url()s when vendoring into web/ or app/. */

/* ---- Fonts (self-hosted, OFL; never fetch from a CDN) ------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-roman-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var-italic-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/chivo-mono-var-roman-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Base --------------------------------------------------------------- */
.dusk, .dusk body {
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
}

/* ---- Type roles: Ladder B (adopted July 29, 2026) -----------------------
   Condensed 600 carries the top of the ladder; weights live between 400
   and 600; hierarchy below the hero is carried by size and 600/500/400
   steps at normal width. Superseded Ladder A (weight-extremes) is fully
   retired: the wordmark question closed on July 29 2026 in favour of the
   condensed nameplate. */
.t-hero { /* marketing hero / nameplate voice */
  font-size: 84px; line-height: 88px;
  font-weight: var(--weight-semibold); font-stretch: var(--width-condensed);
  letter-spacing: var(--tracking-condensed);
}
.t-hero-doc { /* the same role at document-title scale */
  font-size: 48px; line-height: 52px;
  font-weight: var(--weight-semibold); font-stretch: var(--width-condensed);
  letter-spacing: var(--tracking-condensed);
}
.t-hero-sub { /* hero subheading; the landing step under a hero */
  font-size: 24px; line-height: 33px;
  font-weight: var(--weight-regular);
  color: var(--color-ink-dim); max-width: var(--measure-lede);
}
.t-hero-sub-doc { font-size: 18px; line-height: 26px;
  font-weight: var(--weight-regular); color: var(--color-ink-dim);
  max-width: var(--measure-lede); }
/* The eyebrow role is REMOVED (Aug 11 2026). A small caps label above a
   heading, restating the section it introduces, is a tic and not hierarchy.
   Do not add it back. */
.t-section {
  font-size: var(--text-h2); line-height: var(--leading-h2);
  font-weight: var(--weight-semibold); font-stretch: var(--width-narrow);
  letter-spacing: -0.005em;
}
.t-subsection {
  font-size: var(--text-h3); line-height: var(--leading-h3);
  font-weight: var(--weight-medium); font-stretch: var(--width-narrow);
}
.t-body { max-width: var(--measure-body); }
.t-quote { /* pull quote */
  font-size: 26px; line-height: 36px;
  font-weight: var(--weight-regular); font-style: italic;
  color: var(--color-ink);
}
.t-caption {
  font-size: var(--text-caption); line-height: var(--leading-caption);
  color: var(--color-ink-dim);
}
.t-data { /* technical data lines: refs, levels, temperatures */
  font-size: 13px; line-height: 20px;
  font-weight: var(--weight-medium); font-stretch: var(--width-condensed);
  font-feature-settings: "tnum";
}
.t-label { /* condensed apparatus: table heads, column labels */
  font-size: 11px; line-height: 16px;
  font-weight: var(--weight-medium); font-stretch: var(--width-condensed);
  letter-spacing: var(--tracking-condensed); text-transform: uppercase;
  color: var(--color-ink-faint);
}
.t-ui-label { /* app-chrome labels: panel heads, card labels, nav groups.
  In UI, condensed caps is reserved for the working wordmark, table column
  heads, and the poppy CTA (brand/BRAND.md "Apparatus in app UI"). */
  font-size: 12px; line-height: 16px;
  font-weight: var(--weight-medium);
  color: var(--color-ink-dim);
}
.t-field { /* Chivo Mono: field notes and captured data ONLY */
  font-family: var(--font-field);
  font-size: 12px; line-height: 19px;
  color: var(--color-ink-dim);
}
.t-num { font-feature-settings: "tnum"; } /* REQUIRED on numeric columns —
  Archivo's default figures are proportional (verified July 2026) */

/* ---- Wordmark -----------------------------------------------------------
   The mark is the NAMEPLATE (decided July 29 2026, "the tall poppy"):
   Archivo condensed, wght 600, wdth 62, tracking +0.02em, title case.
   One voice at every size — nav, card, letterhead, masthead, all the same
   treatment. There is therefore no optical-width modifier any more; the
   old .wordmark-sm is gone.

   Markup:  <span class="wordmark">Poppy Room</span>

   The split-weight mark (thin "Poppy" / black "Room") is RETIRED and must
   not appear on new surfaces. Legacy <b>/<i> markup inside .wordmark is
   neutralised below, so any caller still using the old two-element markup
   degrades to the nameplate rather than rendering the retired mark.
   The name takes no suffix; descriptors live in scope lines. */
.wordmark {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-stretch: var(--width-condensed);
  font-variation-settings: "wdth" 62, "wght" 600;
  letter-spacing: var(--tracking-condensed);
}
.wordmark b, .wordmark i { font: inherit; font-style: normal; }
.wordmark-working { /* title blocks, packages, document masters */
  font-family: var(--font-sans); font-weight: var(--weight-medium);
  font-stretch: var(--width-condensed); letter-spacing: var(--tracking-condensed);
  text-transform: uppercase;
}
.wordmark-quiet { /* footers, folios, embossing, share pages */
  font-family: var(--font-sans); font-weight: var(--weight-light);
  font-stretch: var(--width-condensed); letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---- Surfaces ----------------------------------------------------------- */
.on-ink { background: var(--color-ink); color: var(--color-paper); }
.on-ink .t-hero-sub, .on-ink .t-hero-sub-doc { color: var(--color-paper-dim); }
.rule    { border-top: 1px solid var(--color-rule); }
.rule-ink{ border-top: 2px solid var(--color-ink); }

/* ---- Components ---------------------------------------------------------
   The accent budget: at most one .accent or .btn-poppy per surface. */
.btn-poppy {
  display: inline-flex; align-items: center; padding: 10px 22px;
  background: var(--color-poppy); color: var(--color-ink);
  font-weight: var(--weight-bold); font-stretch: var(--width-condensed);
  font-size: 13px; letter-spacing: var(--tracking-label);
  text-transform: uppercase; border-radius: var(--radius-none);
}
.btn-ink { /* the quiet sibling */
  display: inline-flex; align-items: center; padding: 10px 22px;
  background: var(--color-ink); color: var(--color-paper);
  font-weight: var(--weight-semibold); font-stretch: var(--width-condensed);
  font-size: 13px; letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.accent-dot {
  width: 0.42em; height: 0.42em; border-radius: var(--radius-pill);
  background: var(--color-poppy); display: inline-block;
}

/* Tables: hairline rows, condensed heads, tnum numerals right-aligned */
.dusk table { border-collapse: collapse; width: 100%; }
.dusk thead th {
  font-size: 11px; font-weight: var(--weight-semibold);
  font-stretch: var(--width-condensed); letter-spacing: var(--tracking-condensed);
  text-transform: uppercase; color: var(--color-ink-faint);
  text-align: left; padding: 12px 8px 12px 0;
  border-top: 1px solid var(--color-ink); border-bottom: 1px solid var(--color-rule);
}
.dusk tbody td { padding: 12px 8px 12px 0; border-bottom: 1px solid var(--color-rule);
  font-size: 14px; }
.dusk td.num, .dusk th.num { text-align: right; font-feature-settings: "tnum"; }
