/*
 * PeptideIndex — design system
 * =============================
 * Forked from datamining/swa's design-system.css (same font stack, same
 * component class names) with the palette custom properties re-themed to
 * teal. Every consumer of this file (site.css, inline <style> blocks) reads
 * colors through the custom properties below, never a literal hex, so this
 * is the ONLY file that encodes the brand palette.
 *
 * Fonts are self-hosted (woff2, ../fonts/) -- no external font requests, so
 * this stylesheet works under a strict CSP with no font-src exception and
 * fully offline. All three families are SIL Open Font License 1.1 (license
 * text: ../fonts/LICENSES/OFL-*.txt):
 *   - Manrope -- geometric sans (display/headings).
 *   - Inter   -- grotesque sans (body/UI/labels + all numeric/chrome).
 *
 * There is deliberately no monospace family: UI chrome (stat lines, count
 * pills, prices, labels) reads as Inter, and numeric columns hold their
 * alignment with `font-variant-numeric: tabular-nums` rather than a mono
 * face. The --font-mono token below is kept as an alias of --font-sans so
 * the existing `var(--font-mono)` call sites resolve to Inter with no churn.
 */

/* ---------- Type: self-hosted, variable where the source ships one ---------- */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/Manrope-Variable.woff2') format('woff2-variations'), url('../fonts/Manrope-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Inter-Variable.woff2') format('woff2-variations'), url('../fonts/Inter-Variable.woff2') format('woff2');
}
/* ---------- Tokens ---------- */

:root {
  /* palette -- PeptideIndex teal re-theme. Names match the upstream design
     system 1:1 so every .ds-* component below re-themes with zero edits. */
  --ink: #07201C;          /* base background */
  --panel: #0C2E28;        /* raised surface */
  --panel-deep: #163C34;   /* interpolated between panel and panel-mid */
  --panel-mid: #134A40;    /* table headers, chips */
  --brass: #2DD4BF;
  --brass-bright: #5EEAD4;
  --paper: #E6F2EF;        /* primary text on dark */
  --paper-dim: rgba(230, 242, 239, .7);
  --paper-faint: rgba(230, 242, 239, .5);
  --rule: rgba(230, 242, 239, .12);
  --rule-strong: rgba(230, 242, 239, .25);
  --positive: #2DD4BF;
  --caution: #E0A44B;
  --negative: #E06A5A;

  /* type */
  --font-display: 'Manrope', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  /* No monospace on this site -- alias to the sans so legacy call sites and
     `code`/`pre` render Inter (numeric alignment handled with tabular-nums). */
  --font-mono: var(--font-sans);

  --tracking-wide: 0.18em;
  --tracking-wider: 0.32em;

  /* fluid type scale -- clamp(min, preferred, max) */
  --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0: clamp(.95rem, .92rem + .15vw, 1rem);
  --step-1: clamp(1.125rem, 1.05rem + .35vw, 1.25rem);
  --step-2: clamp(1.4rem, 1.25rem + .7vw, 1.75rem);
  --step-3: clamp(1.9rem, 1.6rem + 1.2vw, 2.5rem);
  --step-4: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  --step-5: clamp(3.2rem, 2.3rem + 3.2vw, 4.75rem);

  /* the aesthetic is square/editorial -- corners are not rounded */
  --radius: 0;
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  background-color: var(--ink);
  color: var(--paper);
  min-height: 100vh;
}
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
}
code, pre, kbd, samp, .font-code, .font-mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
a { color: var(--brass); }
::selection { background: var(--brass); color: var(--ink); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* ---------- Editorial components (usable with or without Tailwind) ---------- */

.kicker {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-faint);
}

.hairline {
  height: 1px;
  background: var(--rule);
  border: none;
}

.ds-pill {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  border: 1px solid rgba(45, 212, 191, .5);
  padding: .18em .65em;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brass);
  background: rgba(45, 212, 191, .06);
}

.ds-card {
  border: 1px solid var(--rule-strong);
  background: var(--panel);
}

.ds-stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--brass);
}

.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  padding: .75em 1.25em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: .875rem;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ds-btn-primary { background: var(--brass); color: var(--ink); }
.ds-btn-primary:hover { background: var(--brass-bright); }
.ds-btn-outline { border-color: rgba(45, 212, 191, .6); color: var(--brass); background: transparent; }
.ds-btn-outline:hover { border-color: var(--brass); background: rgba(45, 212, 191, .1); }
.ds-btn-ghost { border-color: var(--rule-strong); color: var(--paper); background: transparent; }
.ds-btn-ghost:hover { border-color: var(--paper-faint); }

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  border: 1px solid var(--rule-strong);
}
.ds-table th {
  text-align: left;
  padding: .75em 1em;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--paper-faint);
  background: var(--panel-mid);
}
.ds-table td {
  padding: .75em 1em;
  border-top: 1px solid var(--rule);
  background: var(--panel);
}

.ds-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.35;
}

.ds-code-panel {
  border: 1px solid var(--rule-strong);
  background: var(--panel);
}
.ds-code-panel > .ds-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  padding: .6em 1.1em;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--paper-faint);
}
.ds-code-panel pre {
  margin: 0;
  overflow-x: auto;
  padding: 1.1em 1.1em;
  font-size: 13px;
  line-height: 1.7;
  color: var(--paper-dim);
}

.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 9999px; animation: ds-status-blink 1.8s ease-in-out infinite; }
.dot-green { background: var(--positive); box-shadow: 0 0 6px rgba(45, 212, 191, .6); }
.dot-orange { background: var(--caution); box-shadow: 0 0 6px rgba(224, 164, 75, .6); }
.dot-red { background: var(--negative); box-shadow: 0 0 6px rgba(224, 106, 90, .6); }
@keyframes ds-status-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .status-dot { animation: none; } }