/* toat.it. Every colour, space and radius is a token from tokens/tokens.css, a copy of
   docs/brand_assets/tokens/tokens.css; the rules are docs/brand_assets/DESIGN.md. */
@import url("tokens/tokens.css");

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/24px var(--font-sans); }
.wrap { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-12); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Header: the logo is a file. On paper it is the rounded app icon, never the bare wordmark. */
header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.logo { display: block; line-height: 0; border-radius: var(--radius-md); }
.logo img { width: 48px; height: 48px; display: block; }
nav { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
nav a { display: inline-flex; align-items: center; min-height: var(--tap-min); font: 400 15px/21px var(--font-sans); }

h1 { font: 800 32px/38px var(--font-display); letter-spacing: -0.02em; margin: var(--space-8) 0 var(--space-2); }
h2 { font: 700 20px/26px var(--font-display); letter-spacing: -0.01em; margin: var(--space-8) 0 var(--space-2); }
p { margin: var(--space-3) 0; }
strong { font-weight: 600; }
.muted { color: var(--ink-muted); }
ul { padding-left: var(--space-5); margin: var(--space-3) 0; }
li { margin: var(--space-1) 0; }

.card {
  background: var(--paper-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: var(--space-4); margin: var(--space-4) 0;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card-title { display: block; font: 700 20px/26px var(--font-display); letter-spacing: -0.01em; }

table { width: 100%; border-collapse: collapse; font: 400 15px/21px var(--font-sans); }
th, td { text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font: 700 13px/16px var(--font-sans); letter-spacing: 0.01em; color: var(--ink-muted); }

footer {
  margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--line);
  font: 500 13px/18px var(--font-sans); color: var(--ink-muted);
}

/* Primary button: a sage pill with black text, one per page. */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--control-lg); padding: 0 var(--space-6); border-radius: var(--radius-full);
  background: var(--sage); color: var(--on-sage); font: 700 16px/20px var(--font-sans); text-decoration: none;
  transition: background 150ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.button:active { background: var(--sage-press); transform: scale(0.98); }
.button:focus-visible { border-radius: var(--radius-full); }

.badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 0 var(--space-3);
  border-radius: var(--radius-full); background: var(--sage-soft); color: var(--sage-text);
  font: 700 13px/16px var(--font-sans); letter-spacing: 0.01em;
}

/* Landing page: the wordmark on its sage field, then the words on paper. */
.hero { min-height: 80vh; display: flex; flex-direction: column; justify-content: center; }
.brand {
  background: var(--sage); border-radius: var(--radius-xl);
  padding: var(--space-12) var(--space-6); display: flex; justify-content: center;
}
.brand img { width: 220px; max-width: 70%; height: auto; display: block; }
.hero h1 { font: 800 40px/44px var(--font-display); letter-spacing: -0.025em; }

@media (prefers-reduced-motion: reduce) { .button { transition: none; } .button:active { transform: none; } }