/* SiteTwin brand tokens — from the SiteTwin Brand Pack (claude.ai/design).
   Teal is brand + primary action ONLY. Status colours never decorate. */
:root {
  --st-teal: #0E7C86;
  --st-teal-bright: #2FB3B8;   /* accent on dark surfaces */
  --st-teal-deep: #073E45;     /* hover / pressed */

  --st-ink: #0F1214;
  --st-paper: #F4F2ED;
  --st-white: #FFFFFF;
  --st-grey: #6E6A62;          /* secondary text */
  --st-rule: #DCD8CF;          /* hairlines, card borders */

  /* Status — reserved for compliance meaning, never decoration */
  --st-compliant: #2F8F5B;
  --st-defect: #C8462E;
  --st-attention: #E8A317;
  --st-pending: #8A7BC8;

  --st-font-display: Oswald, 'Arial Narrow', sans-serif;    /* headings + logo only */
  --st-font-ui: Archivo, Helvetica, Arial, sans-serif;      /* body + UI */
  --st-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* IDs, clauses, results */

  --st-border: 2px solid var(--st-ink);
  --st-radius: 0px;            /* square by default; icons only are rounded */
  --st-tap: 48px;              /* minimum touch target, gloved hands */
}

/* The wordmark, in HTML (no image request). Reversed variant for dark surfaces. */
.st-logo { display: inline-flex; align-items: stretch; line-height: 1; text-decoration: none; }
.st-logo__site,
.st-logo__twin {
  font-family: var(--st-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1;
}
.st-logo__site { color: var(--st-ink); padding-right: 0.14em; }
.st-logo__twin { background: var(--st-teal); color: #fff; padding: 0.05em 0.2em 0.1em; }
.st-logo--reversed .st-logo__site { color: var(--st-paper); }
.st-logo--reversed .st-logo__twin { background: var(--st-teal-bright); color: var(--st-ink); }

/* Trade descriptor line under/beside the wordmark */
.st-trade {
  font-family: var(--st-font-mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--st-grey);
}

/* The only motion the mark makes: the two halves slide together on load. */
@keyframes st-slide-l { from { transform: translateX(-8%); } to { transform: translateX(0); } }
@keyframes st-slide-r { from { transform: translateX(8%); }  to { transform: translateX(0); } }
.st-logo--enter .st-logo__site { animation: st-slide-l 200ms cubic-bezier(.2,.7,.3,1) both; }
.st-logo--enter .st-logo__twin { animation: st-slide-r 200ms cubic-bezier(.2,.7,.3,1) both; }