/*
 * tmc labs — labs.tmc.dev
 * Applies the brand system at /brand/:
 *   03-color.md       — single signal accent, 13-step neutrals, WCAG ratings
 *   04-typography.md  — Inter (sans), Berkeley/JetBrains Mono (mono), fallback chains
 *   05-design-system.md — 4px grid, flat surfaces, diagram conventions
 *
 * No framework. No build step. Single stylesheet.
 */

:root {
  /* accent */
  --signal-base:  #D45A1F;
  --signal-hover: #B94B15;

  /* semantic (brand/03-color.md §4) */
  --warn-base:    #A86F00;

  /* neutrals — light (default) */
  --neutral-0:  #FFFFFF;
  --neutral-1:  #FAFAF8;
  --neutral-3:  #E6E6E0;
  --neutral-7:  #737370;
  --neutral-10: #2A2A2A;
  --neutral-12: #111418;

  /* typography — fallback chains live here. TODO(fonts): Inter/Berkeley/
     JetBrains load when brand/fonts/ ships; the system-ui fallback is
     load-bearing in the interim. */
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
          Menlo, Consolas, "Liberation Mono", monospace;

  /* 4px spacing grid — subset (brand/05-design-system.md §1) */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* measure */
  --prose:   72ch;
  --content: 560px;   /* slightly narrower for a holding page */
}

@media (prefers-color-scheme: dark) {
  :root {
    --neutral-0:  #0B0C0E;
    --neutral-1:  #111418;
    --neutral-3:  #1D2228;
    --neutral-7:  #707780;
    --neutral-10: #C3C8CE;
    --neutral-12: #E6E8EB;
  }
}

/* reset */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--neutral-0);
  color: var(--neutral-10);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.625;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-feature-settings: "tnum" 1, "zero" 1;  /* tabular figures, slashed zero */
}

main {
  flex: 1;
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-24) var(--space-6) var(--space-16);
}

/* wordmark — monospace, accent-tinted `labs` (brand/02-logo.md Concept A) */
.wordmark {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--neutral-12);
  margin: 0 0 var(--space-16);
  line-height: 1;
}
.wordmark__accent { color: var(--signal-base); }

/* lede — two-line hero, hedges between agents and inference/training */
.lede {
  margin: 0 0 var(--space-12);
}
.lede__headline {
  font-size: 28px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--neutral-12);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
  max-width: 22ch;
}
.lede__sub {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--neutral-10);
  margin: 0;
  max-width: 48ch;
}

/* stack diagram — canonical four-layer form (brand/07-application.md §6.1).
   PRODUCT layer carries a 4px signal-base stripe on its left edge. */
.stack {
  margin: 0 0 var(--space-12);
}
.stack pre {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--neutral-10);
  background: var(--neutral-1);
  border: 1px solid var(--neutral-3);
  border-radius: 0;          /* radius-0; diagrams are sharp */
  padding: var(--space-4);
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}
.stack__stripe {
  color: var(--signal-base);
  font-weight: 700;
}
.stack a {
  color: var(--signal-base);
  text-decoration: underline;
  text-decoration-color: var(--signal-base);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.stack a:hover {
  color: var(--signal-hover);
  text-decoration-color: var(--signal-hover);
}
.stack pre::after {
  content: "auditable · private · built in Go";
  display: block;
  margin-top: var(--space-4);
  color: var(--neutral-7);
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* contact */
.contact {
  margin: 0;
  line-height: 1.625;
}
.contact p {
  margin: 0;
}
.contact p + p {
  margin-top: var(--space-2);
}
.contact .meta {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--neutral-7);
}

/* links — accent text, underline always in prose (brand/06-components.md §2) */
a {
  color: var(--signal-base);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 120ms ease-out;
}
a:hover {
  color: var(--signal-hover);
}
a:focus-visible {
  outline: 2px solid var(--signal-base);
  outline-offset: 2px;
  border-radius: 2px;
}
.contact .meta a {
  color: inherit;
  text-decoration-color: var(--neutral-3);
}
.contact .meta a:hover {
  color: var(--signal-base);
  text-decoration-color: var(--signal-base);
}

footer {
  width: 100%;
  max-width: var(--content);
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-10);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--neutral-7);
  border-top: 1px solid var(--neutral-3);
}
footer p { margin: 0; }

/* narrow viewports — scale hero down one step (brand/05-design-system.md §12) */
@media (max-width: 640px) {
  main {
    padding-top: var(--space-16);
    padding-bottom: var(--space-12);
  }
  .wordmark       { font-size: 24px; margin-bottom: var(--space-12); }
  .lede__headline { font-size: 24px; max-width: 18ch; }
  .lede__sub      { font-size: 16px; }
  .stack pre      { font-size: 10.5px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ─────────────────────────────────────────────────────────────
 * Product pages (/skiff/, /cove/)
 * Shared layout. Wordmark + breadcrumb nav, hero, status row,
 * bullets, integration prose, links, footer.
 * ───────────────────────────────────────────────────────────── */

body.product main {
  padding-top: var(--space-16);
}

.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 var(--space-16);
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 500;
}
.nav__home {
  color: var(--neutral-12);
  text-decoration: none;
}
.nav__home .wordmark__accent { color: var(--signal-base); }
.nav__home:hover .wordmark__accent { color: var(--signal-hover); }
.nav__crumb {
  color: var(--neutral-7);
  font-weight: 500;
}

.product-hero {
  margin: 0 0 var(--space-10);
}
.product-hero__headline {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--neutral-12);
  margin: 0 0 var(--space-3);
  max-width: 24ch;
}
.product-hero__sub {
  font-size: 18px;
  line-height: 1.5;
  color: var(--neutral-10);
  margin: 0;
  max-width: 56ch;
}

.status {
  display: block;
  margin: 0 0 var(--space-10);
  padding: var(--space-3) var(--space-4);
  background: var(--neutral-1);
  border-left: 3px solid var(--signal-base);
  font-size: 15px;
  line-height: 1.55;
  color: var(--neutral-10);
}
.status strong { color: var(--neutral-12); font-weight: 500; }

.status--active {
  border-left-color: var(--warn-base);
}

.section-label {
  display: block;
  margin: 0 0 var(--space-3);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--neutral-7);
}

.bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-10);
}
.bullets li {
  padding: var(--space-2) 0;
  border-top: 1px solid var(--neutral-3);
  font-size: 15px;
  line-height: 1.55;
}
.bullets li:last-child { border-bottom: 1px solid var(--neutral-3); }
.bullets strong { color: var(--neutral-12); font-weight: 500; }

.prose {
  font-size: 15px;
  line-height: 1.65;
  color: var(--neutral-10);
  margin: 0 0 var(--space-10);
  max-width: 64ch;
}
.prose code {
  font-family: var(--mono);
  font-size: 0.92em;
  color: var(--neutral-12);
}

.links {
  margin: 0 0 var(--space-10);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.8;
  color: var(--neutral-10);
}
.links__row { margin: 0; }
.links__label {
  color: var(--neutral-7);
  display: inline-block;
  min-width: 7ch;
}
.links a {
  color: var(--neutral-12);
  text-decoration-color: var(--neutral-3);
}
.links a:hover {
  color: var(--signal-base);
  text-decoration-color: var(--signal-base);
}

/* narrow viewports for product pages */
@media (max-width: 640px) {
  .nav { font-size: 15px; margin-bottom: var(--space-12); }
  .product-hero__headline { font-size: 26px; max-width: 18ch; }
  .product-hero__sub { font-size: 15px; }
  .status { font-size: 14px; }
  .bullets li { font-size: 14px; }
  .prose { font-size: 14px; }
}