/* Self-contained by design. Tokens are duplicated from apps/dashboard rather
   than shared — per ADR 0003, duplication is accepted, and these pages must
   never fail to render because another app's build changed. */

:root {
  color-scheme: light dark;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-title: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --text-section: 0.75rem;
  --text-body: 1rem;
  --text-note: 0.8125rem;

  --tracking-tight: -0.03em;
  --tracking-wide: 0.14em;

  --space-page: clamp(1.25rem, 0.5rem + 3vw, 5rem);
  --space-section: clamp(2rem, 1.25rem + 2vw, 3.25rem);

  --measure: 38rem;
  --radius: 3px;
}

:root,
:root[data-theme="light"] {
  --paper: oklch(97.5% 0.006 85);
  --ink: oklch(21% 0.012 265);
  --ink-soft: oklch(52% 0.012 265);
  --ink-faint: oklch(68% 0.01 265);
  --rule: oklch(88% 0.008 265);
  --accent: oklch(62% 0.17 45);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: oklch(16% 0.011 265);
    --ink: oklch(94% 0.005 265);
    --ink-soft: oklch(70% 0.011 265);
    --ink-faint: oklch(53% 0.012 265);
    --rule: oklch(29% 0.013 265);
    --accent: oklch(75% 0.15 62);
  }
}

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

body {
  margin: 0;
  padding: var(--space-page);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: var(--measure);
  margin-inline: auto;
}

.eyebrow {
  margin: 0 0 0.75rem;
  font-size: var(--text-section);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
}

h1 {
  margin: 0 0 1.5rem;
  font-size: var(--text-title);
  letter-spacing: var(--tracking-tight);
  line-height: 1.05;
}

h2 {
  margin: var(--space-section) 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--text-section);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-soft);
}

p,
li {
  color: var(--ink-soft);
}

p {
  margin: 0 0 1rem;
}

ul {
  margin: 0 0 1rem;
  padding-left: 1.1rem;
}

li {
  margin-bottom: 0.35rem;
}

strong {
  color: var(--ink);
  font-weight: 600;
}

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

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

footer {
  margin-top: var(--space-section);
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
  font-size: var(--text-note);
  color: var(--ink-faint);
}