/**
 * tilas.xyz — the whole stylesheet.
 *
 * It defines no colour, no type size, no radius and no shadow of its own: every value here is a
 * `var(--…)` out of `packages/ui/src/tokens.css`, which `build.ts` emits beside this file.
 * MARKETING.md §3 asks for the site to be "built from the app's own design tokens so the site and
 * the product cannot look like different companies", and tokens.css was written expecting it —
 * the `--surface-1` spellings exist precisely so hand-written CSS like this can consume them.
 * `tokenSources.test.ts` covers this directory, so a raw hex here fails the build.
 *
 * Hand-written rather than Tailwind because a marketing page is a document. It ships no
 * JavaScript at all: `build.ts` renders React to static HTML once, and nothing is hydrated.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  color-scheme: dark light;
}

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-panel);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

h1,
h2,
h3 {
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: calc(var(--text-title) * 2);
}

h2 {
  font-size: calc(var(--text-title) * 1.2);
}

h3 {
  font-size: var(--text-panel);
}

p {
  margin: 0;
  max-width: 68ch;
}

/* --- frame ------------------------------------------------------------------------------- */

.wrap {
  margin: 0 auto;
  max-width: calc(var(--spacing) * 260);
  padding: 0 calc(var(--spacing) * 6);
}

.nav {
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: calc(var(--spacing) * 5);
  /* The app's own bar height, so the two products' chrome measures the same. */
  height: var(--spacing-topbar);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: var(--surface-0);
  z-index: 1;
}

.nav a {
  color: var(--text-muted);
  font-size: var(--text-ui);
  text-decoration: none;
}

.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--text-primary);
}

.wordmark {
  align-items: center;
  color: var(--text-primary);
  display: inline-flex;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-semibold);
  gap: calc(var(--spacing) * 2);
  letter-spacing: var(--tracking-wordmark);
  margin-right: auto;
  text-decoration: none;
  text-transform: uppercase;
}

/* The mark carries its own ground, so it needs the same corner the app's panels have. */
.mark {
  border-radius: var(--radius-control);
  display: block;
}

section {
  border-top: 1px solid var(--border-subtle);
  padding: calc(var(--spacing) * 16) 0;
}

section:first-of-type {
  border-top: 0;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing) * 4);
}

.lede {
  color: var(--text-muted);
  font-size: var(--text-title);
  line-height: 1.5;
}

.small {
  color: var(--text-muted);
  font-size: var(--text-ui);
}

/* --- controls ---------------------------------------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing) * 3);
}

.button {
  background: var(--surface-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-etch);
  color: var(--text-primary);
  display: inline-block;
  font-size: var(--text-ui);
  font-weight: var(--font-weight-medium);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
  text-decoration: none;
  transition: border-color var(--default-transition-duration) var(--ease-out);
}

.button:hover {
  border-color: var(--border-strong);
}

.button-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* --- content ----------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: calc(var(--spacing) * 6);
  grid-template-columns: repeat(auto-fit, minmax(calc(var(--spacing) * 64), 1fr));
}

.card {
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-etch);
  padding: calc(var(--spacing) * 5);
}

table {
  border-collapse: collapse;
  font-size: var(--text-ui);
  width: 100%;
}

th {
  color: var(--text-muted);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
}

th,
td {
  border-bottom: 1px solid var(--border-subtle);
  padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) calc(var(--spacing) * 2) 0;
  vertical-align: top;
}

.scroll {
  overflow-x: auto;
}

.pipeline {
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--text-ui);
  letter-spacing: var(--tracking-label);
}

.pipeline strong {
  color: var(--text-primary);
  font-weight: var(--font-weight-normal);
}

.figure {
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-title);
  font-variant-numeric: tabular-nums;
}

td {
  font-variant-numeric: tabular-nums;
}

/* Status is never colour alone (DESIGN.md §6) — every one of these is a word first. */
.state-shipped {
  color: var(--ok);
}

.state-progress {
  color: var(--warning);
}

.state-planned {
  color: var(--text-muted);
}

/* --- the embedded app -------------------------------------------------------------------- */

.app-frame {
  aspect-ratio: 16 / 10;
  background: var(--surface-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-panel);
  display: block;
  width: 100%;
}

/* --- footer ------------------------------------------------------------------------------ */

footer {
  border-top: 1px solid var(--border-subtle);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: var(--text-ui);
  gap: calc(var(--spacing) * 5);
  padding: calc(var(--spacing) * 8) 0;
}

footer a {
  color: var(--text-muted);
}

/* --- narrow ------------------------------------------------------------------------------- */

/*
 * The one media query on the site, and it does what DESIGN.md §3 refuses to do in the *app*:
 * reflow. That is not an inconsistency — the app is a desktop-class tool with a 3D viewport and
 * says so, and this is a document. A stranger meeting the product for the first time is often
 * doing it on a phone, and MARKETING.md's whole first guarantee is "it opens".
 *
 * The nav is what breaks first: eight links in a non-wrapping row overflow well before 400px.
 * It already wraps above; here it stops being a fixed-height bar so the second row has somewhere
 * to go, and the hero type comes down to something readable in a narrow column.
 */
@media (max-width: 640px) {
  .nav {
    gap: calc(var(--spacing) * 3);
    height: auto;
    padding-bottom: calc(var(--spacing) * 2);
    padding-top: calc(var(--spacing) * 2);
    position: static;
  }

  h1 {
    font-size: calc(var(--text-title) * 1.4);
  }

  h2 {
    font-size: var(--text-title);
  }

  .lede {
    font-size: var(--text-panel);
  }

  section {
    padding: calc(var(--spacing) * 10) 0;
  }
}