/* Mismos tokens que la app (src/theme/tokens.ts): neutros + paleta Coral, letra Figtree. */
:root {
  --bg: #F7F5F1; --surface: #FFFFFF; --ink: #1E1B26; --soft: #625C6B; --line: #E4DFD7;
  --accent: #B23F18; --on-accent: #FFFFFF; --on-block: #FCF5E3; --rust: #C62828;
  --block: linear-gradient(180deg, #E8673F, #C2461C 60%, #9C3512);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --surface: #1C1C1F; --ink: #F4F4F5; --soft: #A1A1AA; --line: #2C2C31;
    --accent: #FF8A65; --on-accent: #1A0E0A; --rust: #FF4D4F;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.6 'Figtree', system-ui, sans-serif;
}
a { color: var(--accent); }
.wrap { max-width: 680px; margin: 0 auto; padding: 0 16px 48px; }
header.block {
  background: var(--block); color: var(--on-block);
  padding: 32px 16px 28px; margin-bottom: 24px;
}
header.block .wrap { padding-bottom: 0; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-block); text-decoration: none; font-weight: 600; }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
h1, h2 { font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
h1 { font-size: clamp(28px, 7vw, 40px); margin: 20px 0 8px; }
h1 em { font-style: normal; opacity: .85; }
header.block p { margin: 0; opacity: .85; }
h2 { font-size: 21px; margin: 0 0 8px; }
section { background: var(--surface); border-radius: 16px; padding: 20px; margin-bottom: 12px; }
section p, section ul, section ol { margin: 0 0 10px; }
section > :last-child { margin-bottom: 0; }
li { margin-bottom: 4px; }
.warn { color: var(--rust); }
footer { color: var(--soft); font-size: 13.5px; padding: 8px 4px; }
footer nav { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.code { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 6px; margin: 4px 0 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700; text-decoration: none; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.quiet { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); font: inherit; font-weight: 600; cursor: pointer; }
.soft { color: var(--soft); }