/* Astrosalva component stylesheet — the rules from colors_and_type.css, with every token value moved to tokens.json.
   Loaded after tokens.css. The full original is kept at archived/colors_and_type.css. */
/* ============================================================
   ASTROSALVA THERAPEUTICS — COLORS & TYPE
   The 60/30/10 system. No gradients. No tints.
   ============================================================ */

/* ── Inter Tight — local @font-face (SIL OFL 1.1 · fonts/InterTight-OFL.txt) ── */
/* Canonical brand family. Google Fonts build, variable 100–900, roman + italic,
   latin + latin-ext subsets. Glyphs outside them (e.g. arrows) fall back to Inter. */
@font-face { font-family: 'Inter Tight'; src: url('../fonts/InterTight-Italic-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; src: url('../fonts/InterTight-latin-ext.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Inter (variable + static cuts) — local @font-face ──────────────────── */
/* Fallback face only. Inter Tight (above) is the brand family; Inter covers
   anything outside its subsets and any load failure. */

/* Variable cuts (preferred — covers full weight axis). */

/* Inter Display — fallback only; Inter Tight is canonical. Static cuts only (no variable file). */

/* Inter Tight ships locally (top of file). Inter / Inter Display above are fallbacks only. */

/* ── JetBrains Mono — local @font-face (brand-supplied) ─────────────────── */
/* Full family covers 100/200/300/400/500/600/700/800 + italics. */

/* JetBrains Mono NL (no ligatures) — registered as a separate family for cases where
   the unligated form is wanted (e.g. tabular numbers, eyebrows next to figures). */

/* Token values (colors, type scale, spacing, radii, lines, motion) live in tokens.json and compile to tokens.css. */

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Inverse surface */
.on-indigo {
  background: var(--bg-alt);
  color: var(--fg-alt);
  --fg: var(--bone);
  --fg-mute: var(--mute-on-indigo);
  --rule: var(--hairline-on-indigo);
}

/* HEADLINES — Inter Tight, tight tracking, no all-caps */
h1, .h1 {
  font: 600 var(--t-h1) / var(--leading-headline) var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}
h2, .h2 {
  font: 600 var(--t-h2) / var(--leading-headline) var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}
h3, .h3 {
  font: 500 var(--t-h3) / var(--leading-headline) var(--font-display);
  letter-spacing: var(--tracking-body);
  margin: 0;
}

.display {
  font: 500 var(--t-display) / var(--leading-display) var(--font-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.lede {
  font: 400 var(--t-lede) / var(--leading-tight) var(--font-sans);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  text-wrap: pretty;
}

/* EDITORIAL ITALIC EMPHASIS — coral. earned. */
em, i, .em-italic {
  font-style: italic;
  color: var(--accent);
  font-weight: inherit;
}

/* EYEBROWS / PAGE NUMBERS — monospace, uppercase, small only */
.eyebrow,
.page-num,
.label-mono {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-mute);
  font-weight: 400;
}

.page-num { font-size: var(--t-page-num); }

/* v2 — CORAL TERMINAL. The full stop of every headline is set in coral.
   This replaces the ad hoc "one italic word" as the default accent form.
   Markup: <h1>Headline<span class="terminal">.</span></h1>
   Same weight as the headline; never enlarged; never doubled; never on coral. */
.terminal { color: var(--accent); font-style: normal; }

/* v2 — RAY DIVIDER. One shaft of the logomark, used as the section rule.
   Tapered 2px → 0.5px, left-heavy. Hairline stays for tables and footers. */
.ray {
  display: block; width: 100%; height: 3px; border: 0; margin: var(--s-6) 0;
  background-color: currentColor;
  clip-path: polygon(0 20%, 0 80%, 100% 58%, 100% 42%);
  color: var(--fg);
}
.ray-underline { clip-path: polygon(0 10%, 0 90%, 100% 65%, 100% 35%); height: 2px; margin: 4px 0 0; }

/* v2 — DISPLAY NUMERALS. Numbers are the brand's second voice. */
.numeral {
  font-family: var(--font-numeral);
  font-weight: 300;
  font-size: var(--t-numeral);
  line-height: 0.92;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.numeral-sm { font-family: var(--font-numeral); font-weight: 400; font-size: var(--t-numeral-sm); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.numeral.accent { color: var(--accent); }  /* the featured figure only */

/* v2 — REACH. The one brand motion: body appears, processes extend, stop. Plays once. */
@keyframes reach-body { from { opacity: 0; } to { opacity: 1; } }
@keyframes reach-rays { from { transform: scale(0.02); } to { transform: scale(1); } }
.reach .body { animation: reach-body var(--dur-fast) var(--ease-quiet) both; }
.reach .rays { transform-origin: var(--reach-origin, 50% 48%); transform-box: view-box;
  animation: reach-rays var(--dur-reach) var(--ease-quiet) var(--dur-fast) both; }
@media (prefers-reduced-motion: reduce) { .reach .body, .reach .rays { animation: none; } }

/* v2 — NIGHT FIELD. The mandatory first surface for every external introduction. */
.night-field { position: relative; overflow: hidden; background: var(--indigo); color: var(--bone); }
.night-field .motif { position: absolute; right: -18%; top: -22%; height: 150%; opacity: 0.09; pointer-events: none; }
.night-field > :not(.motif) { position: relative; }

/* v2 — FAMILY REGISTER. Bone-dominant, larger, second person permitted. */
.register-family { --t-body: var(--t-body-family); --leading-body: var(--leading-family); }
.register-family p, .register-family .body { font-size: var(--t-body-family); line-height: var(--leading-family); max-width: 58ch; }
.register-family .portrait { border-right: var(--hairline) solid var(--rule); }

/* v2 — WHITE REGISTER. Same ink, white ground (print, clinical PDFs, partner templates). */
.on-white { background: var(--white); color: var(--fg); --bg: var(--white); }

/* ASTROSALVA WORDMARK — locked typographic treatment */
.wordmark {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-tight);
  font-size: var(--t-h2);
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .astro { font-weight: 400; }
.wordmark .salva { font-weight: 600; font-style: italic; color: var(--accent); }
.wordmark.solid .salva { font-style: normal; color: inherit; }

/* ASTROSALVA FORMAL LOCKUP — wordmark stacked over THERAPEUTICS eyebrow.
   Use only for first-introduction contexts: title slides, press, legal,
   business-card formal lockup. The bare .wordmark is the default elsewhere.
   Spacing locked: gap = 0.6× wordmark x-height; THERAPEUTICS in mono with
   letter-spacing 0.18em (slightly looser than other eyebrows because it
   sits under a logo, not in body type). */
.lockup {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
}
.lockup .wordmark { font-size: inherit; }
.lockup .therapeutics {
  font-family: var(--font-mono);
  font-weight: 400;
  /* ~30% of wordmark size — set in em so it scales with parent font-size */
  font-size: 0.30em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* gap = 0.6× x-height ≈ 0.30em on the parent scale */
  margin-top: 0.30em;
  color: var(--fg-mute);
}
.lockup.center { align-items: center; }
.lockup.center .therapeutics { /* identical, but parent centers it */ }

/* RULES — hairline editorial dividers */
hr, .rule {
  border: 0;
  border-top: var(--hairline) solid var(--rule);
  margin: var(--s-6) 0;
}

/* LINKS — underline by default, no color shift */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { text-decoration-thickness: 2px; } /* v2: was opacity 0.62 — no alpha text, nothing moves but reach */

/* QUOTES — pulled, indented, unmarked. v2: coral left border removed (coral is never a stroke). */
blockquote {
  margin: 0;
  padding: 0 0 0 var(--s-5);
  border-left: var(--hairline) solid var(--rule);
  font: 400 var(--t-lede) / var(--leading-tight) var(--font-sans);
  text-wrap: pretty;
}

/* CODE / DATA */
code, kbd, samp, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}