/* GENERATED by scripts/site.mjs: src/ui/tokens.css followed by site/site.css.
   Edit those, not this. */

/*
  tokens.css — every visual value in the product, from DESIGN.md.

  This is the only file in the repo allowed to contain a colour, size, radius or font literal.
  Everything else reads a custom property. The email renderer reads this file at build time and
  inlines the same values, so the sidebar and the email cannot drift.

  Light is the default on :root. Dark applies when the viewer chose it (data-theme="dark") or
  when the system prefers it and the viewer did not choose light.
*/

:root {
  /* Colour — cool gray neutrals, one deep teal accent, three state colours. */
  --bg: #fbfbfa;
  --surface: #ffffff;
  --border: #e4e4e2;
  --text: #17181a;
  --text-muted: #63666b;
  --accent: #0e6e66;
  --accent-weak: #e6f1f0;
  --success: #186a3b;
  --warning: #8a5a00;
  --danger: #a32319;
  --on-accent: #ffffff;

  /* Type */
  --font-sans: Inter, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-display: 48px;
  --text-h1: 32px;
  --text-h2: 24px;
  --text-h3: 18px;
  --text-body: 16px;
  --text-small: 13px;
  --weight-regular: 400;
  --weight-medium: 500;
  --leading-body: 1.5;
  --leading-display: 1.1;

  /* Space — base unit 4px */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* Shape */
  --radius: 6px;
  --hairline: 1px;
  --control-height: 32px;
  --focus-ring: 0 0 0 2px var(--accent);

  /* Widths */
  --sidebar-width: 300px;
  --email-width: 600px;
  --content-max: 1200px;

  /* Motion — 150ms fades and transitions only */
  --motion: 150ms;

  color-scheme: light;
}

/* Add-on sidebars are 300px wide: cap at h2 and use body 14 / small 12. */
:root[data-surface='sidebar'] {
  --text-body: 14px;
  --text-small: 12px;
  --text-h1: 24px;
  --text-display: 24px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111214;
    --surface: #191b1e;
    --border: #2c2f33;
    --text: #f2f2f1;
    --text-muted: #9ba0a6;
    --accent: #4fbfb2;
    --accent-weak: #12312e;
    --success: #5fbf83;
    --warning: #e0a93b;
    --danger: #f0776b;
    --on-accent: #111214;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #111214;
  --surface: #191b1e;
  --border: #2c2f33;
  --text: #f2f2f1;
  --text-muted: #9ba0a6;
  --accent: #4fbfb2;
  --accent-weak: #12312e;
  --success: #5fbf83;
  --warning: #e0a93b;
  --danger: #f0776b;
  --on-accent: #111214;
  color-scheme: dark;
}

/*
  site.css — the public site's own stylesheet.

  It reads src/ui/tokens.css and nothing else: scripts/site.mjs concatenates that file in front
  of this one, so a colour, a radius or a type size can only be changed in one place and the
  site cannot drift away from the product it describes (TASKS.md 3.7).

  No literal colours, sizes or radii below. stylelint enforces that.
*/

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

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

html {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-regular);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

h1 {
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
}

h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-display);
}

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

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

a:focus-visible,
summary:focus-visible {
  outline: none;
  border-radius: var(--radius);
  box-shadow: var(--focus-ring);
}

code {
  font-family: var(--font-mono);
  font-size: var(--text-small);
}

hr {
  height: var(--hairline);
  margin: var(--space-8) 0;
  border: 0;
  background: var(--border);
}

/* ---- Skip link ---- */

.skip {
  position: absolute;
  left: calc(-1 * var(--content-max));
  top: 0;
  padding: var(--space-2) var(--space-3);
  background: var(--surface);
  color: var(--text);
}

.skip:focus {
  left: 0;
  z-index: 2;
}

/* ---- Frame ---- */

.wrap {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.site-header {
  border-bottom: var(--hairline) solid var(--border);
  background: var(--surface);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-4);
  padding-top: var(--space-4);
  padding-bottom: var(--space-4);
}

.wordmark {
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-left: auto;
  font-size: var(--text-small);
}

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

.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
  text-decoration: underline;
}

main {
  display: block;
  padding: var(--space-12) 0;
}

.site-footer {
  border-top: var(--hairline) solid var(--border);
  background: var(--surface);
  font-size: var(--text-small);
  color: var(--text-muted);
}

.site-footer .wrap {
  padding-top: var(--space-8);
  padding-bottom: var(--space-8);
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

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

.fine {
  max-width: var(--email-width);
  margin-top: var(--space-2);
}

/* ---- Prose ---- */

.prose {
  max-width: var(--email-width);
}

.wide {
  max-width: var(--content-max);
}

.prose > * + * {
  margin-top: var(--space-4);
}

.prose > h2 {
  margin-top: var(--space-12);
}

.prose > h3 {
  margin-top: var(--space-8);
}

.prose ul,
.prose ol {
  padding-left: var(--space-6);
}

.prose li + li {
  margin-top: var(--space-2);
}

.lead {
  font-size: var(--text-h3);
  color: var(--text);
}

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

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

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

blockquote.verbatim {
  padding: var(--space-4);
  border-left: var(--space-1) solid var(--accent);
  background: var(--accent-weak);
  border-radius: var(--radius);
  color: var(--text);
}

/* ---- Cards and grids ---- */

.grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(var(--sidebar-width), 1fr));
  margin-top: var(--space-6);
}

.card {
  padding: var(--space-4);
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.card > * + * {
  margin-top: var(--space-2);
}

.card h3 {
  font-size: var(--text-body);
}

.card ul {
  padding-left: var(--space-6);
  font-size: var(--text-small);
  color: var(--text-muted);
}

.price {
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-display);
}

/* ---- Tables ---- */

.table-scroll {
  overflow-x: auto;
  margin-top: var(--space-4);
}

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

th,
td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--border);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

td code {
  overflow-wrap: anywhere;
}

/* ---- Hero ---- */

.hero {
  max-width: var(--content-max);
}

.hero h1 {
  font-size: var(--text-display);
}

.hero .lead {
  max-width: var(--email-width);
  margin-top: var(--space-4);
}

.hero .stamp {
  margin-top: var(--space-6);
}