/* cryptocart.dev's pages: the design system's values (packages/design/css/tokens.css), its neutrals, body font, type
   scale and spacing, light and dark */
:root {
  color-scheme: light dark;
  --bg: #f0efec; --surface: #ffffff; --text: #252422; --muted: #5f5e59; --border: #dad9d5;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --text-md: 1.0625rem; --text-sm: calc(var(--text-md) / 1.2); --text-lg: calc(var(--text-md) * 1.2); --text-3xl: calc(var(--text-md) * 2.0736);
  --space: 0.25rem; --target: 2.75rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121210; --surface: #1b1a18; --text: #f0efec; --muted: #a4a39e; --border: #393834; }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  display: flex; flex-direction: column; min-height: 100dvh;
  background: var(--bg); color: var(--text); font-family: var(--font); font-size: var(--text-md); line-height: 1.45;
}
header, footer { display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(var(--space) * 4); padding: calc(var(--space) * 2) calc(var(--space) * 4); }
header { min-height: calc(var(--target) + var(--space) * 4); background: var(--surface); border-bottom: 1px solid var(--border); }
footer { min-height: calc(var(--target) + var(--space) * 4); border-top: 1px solid var(--border); color: var(--muted); font-size: var(--text-sm); }
nav { display: flex; flex-wrap: wrap; column-gap: calc(var(--space) * 4); }
.name { margin-right: auto; color: inherit; font-weight: 700; letter-spacing: -0.015em; text-decoration: none; }
a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--target); min-height: var(--target); color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
main { flex: 1; display: flex; flex-direction: column; gap: calc(var(--space) * 3); width: 100%; max-width: 40rem; margin: 0 auto; padding: calc(var(--space) * 16) calc(var(--space) * 4); }
main.home { justify-content: center; }
h1 { margin: 0; font-size: min(var(--text-3xl), 14vw); line-height: 1.2; letter-spacing: -0.015em; }
h2 { margin: calc(var(--space) * 4) 0 0; font-size: var(--text-lg); line-height: 1.2; }
p, ul { margin: 0; }
ul { display: flex; flex-direction: column; gap: calc(var(--space) * 2); padding-left: calc(var(--space) * 5); }
main a { display: inline; min-width: 0; min-height: 0; overflow-wrap: anywhere; }
.lead { color: var(--muted); font-size: var(--text-lg); }
.muted { color: var(--muted); font-size: var(--text-sm); }
@media (min-width: 48rem) { header, footer { padding: 0 calc(var(--space) * 8); } }