/* ============================================================================
   readme.css — front-door / handoff page chrome
   Editorial documentation identity (namespaced --doc-*), matching the Tokens
   page. The LIVE DEMO island uses the real component CSS (primitives/content/
   cards) so it proves the system rather than mocking it.
   ============================================================================ */
:root {
  --doc-paper:#f3f0e9; --doc-card:#fbfaf6; --doc-ink:#1c1b18; --doc-faint:#8a857a;
  --doc-rule:#d9d3c6; --doc-rule-2:#c7c0b1;
  --doc-serif:"Newsreader",Georgia,serif; --doc-sans:"Inter",system-ui,sans-serif; --doc-mono:"JetBrains Mono",ui-monospace,monospace;
  --doc-maxw:1180px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin:0; background:var(--doc-paper); color:var(--doc-ink); font-family:var(--doc-sans); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
::selection { background:#1c1b18; color:#f3f0e9; }
.wrap { max-width:var(--doc-maxw); margin:0 auto; padding:0 24px; }
a { color:inherit; }
code { font-family:var(--doc-mono); font-size:.88em; }

/* ---- masthead ---- */
.mast { border-bottom:3px solid var(--doc-ink); }
.mast__top { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-family:var(--doc-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--doc-faint); padding:14px 0 12px; border-bottom:1px solid var(--doc-rule); }
.mast__title { font-family:var(--doc-serif); font-weight:600; letter-spacing:-0.02em; line-height:0.97; font-size:clamp(38px,8vw,88px); margin:22px 0 16px; text-wrap:balance; }
.mast__sub { display:flex; gap:24px; flex-wrap:wrap; border-top:1px solid var(--doc-rule); padding:14px 0 20px; }
.mast__lede { font-family:var(--doc-serif); font-size:clamp(18px,2.3vw,22px); line-height:1.4; max-width:60ch; color:#353330; margin:0; }
.mast__lede em { font-style:italic; color:var(--doc-ink); }

/* ---- toc strip ---- */
.toc { position:sticky; top:0; z-index:20; background:rgba(243,240,233,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--doc-rule); }
.toc__row { display:flex; gap:6px; flex-wrap:wrap; padding:10px 0; }
.toc a { font-family:var(--doc-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--doc-faint); text-decoration:none; padding:6px 11px; border-radius:999px; }
.toc a:hover { color:var(--doc-ink); background:#efebe2; }

/* ---- sections ---- */
section { padding:60px 0; border-bottom:1px solid var(--doc-rule); }
.sec-head { display:flex; align-items:baseline; gap:16px; margin-bottom:30px; flex-wrap:wrap; }
.sec-num { font-family:var(--doc-mono); font-size:12px; letter-spacing:.1em; color:var(--doc-faint); border:1px solid var(--doc-rule-2); padding:3px 9px; border-radius:2px; white-space:nowrap; }
.eyebrow { font-family:var(--doc-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--doc-faint); margin:0 0 10px; }
.sec-title { font-family:var(--doc-serif); font-weight:600; letter-spacing:-0.01em; font-size:clamp(26px,4vw,40px); line-height:1.05; margin:0; }
.sec-note { color:#4a473f; max-width:70ch; margin:0 0 8px; font-size:16px; }
.sec-note + .sec-note { margin-top:12px; }
.sec-note b { color:var(--doc-ink); }

/* ---- file map / index tables ---- */
.maptable { width:100%; border:1px solid var(--doc-rule); border-radius:6px; overflow:hidden; background:var(--doc-card); }
.maptable table { width:100%; border-collapse:collapse; }
.maptable th, .maptable td { text-align:left; padding:11px 16px; border-bottom:1px solid var(--doc-rule); font-size:14px; vertical-align:top; }
.maptable thead th { font-family:var(--doc-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--doc-faint); background:#efebe2; }
.maptable td.file { font-family:var(--doc-mono); font-size:12.5px; color:#6b4f1e; white-space:nowrap; }
.maptable td.desc { color:#4a473f; }
.maptable tr:last-child td { border-bottom:0; }
.grp td { background:#efebe2; font-family:var(--doc-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--doc-ink); font-weight:600; }

/* ---- page index cards ---- */
.idx { display:grid; grid-template-columns:1fr; gap:14px; }
@media (min-width:640px){ .idx { grid-template-columns:1fr 1fr; } }
@media (min-width:980px){ .idx { grid-template-columns:1fr 1fr 1fr; } }
.idx-card { display:flex; flex-direction:column; gap:8px; background:var(--doc-card); border:1px solid var(--doc-rule); border-radius:6px; padding:18px 20px; text-decoration:none; color:inherit; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.idx-card:hover { transform:translateY(-2px); box-shadow:0 10px 26px rgba(28,27,24,.08); border-color:var(--doc-rule-2); }
.idx-card__k { font-family:var(--doc-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--doc-faint); }
.idx-card__t { font-family:var(--doc-serif); font-weight:600; font-size:20px; color:var(--doc-ink); }
.idx-card__d { font-size:13.5px; color:#4a473f; line-height:1.5; }
.idx-card__go { font-family:var(--doc-mono); font-size:11px; color:#6b4f1e; margin-top:auto; }

/* ---- steps ---- */
.steps { display:grid; grid-template-columns:1fr; gap:18px; counter-reset:step; }
@media (min-width:860px){ .steps { grid-template-columns:repeat(3,1fr); } }
.step { background:var(--doc-card); border:1px solid var(--doc-rule); border-radius:6px; padding:22px; position:relative; }
.step__n { counter-increment:step; font-family:var(--doc-serif); font-weight:600; font-size:34px; color:#c9a96e; line-height:1; margin-bottom:10px; }
.step__n::before { content:counter(step); }
.step h3 { font-family:var(--doc-serif); font-weight:600; font-size:19px; margin:0 0 8px; }
.step p { font-size:14px; color:#4a473f; margin:0; line-height:1.55; }

/* ---- code blocks ---- */
.code { position:relative; border:1px solid var(--doc-rule); border-radius:6px; overflow:hidden; background:#1b1a17; margin-top:14px; }
.code pre { margin:0; padding:20px; overflow-x:auto; font-family:var(--doc-mono); font-size:12.5px; line-height:1.7; color:#e9e3d4; }
.code .c{color:#8f8a7a;font-style:italic;} .code .v{color:#c9a96e;} .code .s{color:#9ec99b;} .code .k{color:#d6a3c4;} .code .t{color:#7fb8d6;}
.copy { position:absolute; top:12px; right:12px; font-family:var(--doc-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#1b1a17; background:#c9a96e; border:0; border-radius:3px; padding:7px 12px; cursor:pointer; }
.copy:hover{ background:#d8bd86; } .copy:focus-visible{ outline:2px solid #fff8e8; outline-offset:2px; }

/* ---- token contract grid ---- */
.tok-groups { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:760px){ .tok-groups { grid-template-columns:1fr 1fr; } }
.tok-grp { background:var(--doc-card); border:1px solid var(--doc-rule); border-radius:6px; padding:18px 20px; }
.tok-grp h4 { font-family:var(--doc-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--doc-ink); margin:0 0 12px; }
.tok-chips { display:flex; flex-wrap:wrap; gap:6px; }
.tok-chip { font-family:var(--doc-mono); font-size:11px; color:#6b4f1e; background:#efe7d6; border:1px solid #e0d4b8; border-radius:4px; padding:4px 9px; }

/* ============================================================================
   LIVE DEMO ISLAND — uses the REAL component classes from the linked stylesheets
   ============================================================================ */
.demo { border:1px solid var(--doc-rule); border-radius:8px; overflow:hidden; background:var(--doc-card); }
.demo__bar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 16px; background:#efebe2; border-bottom:1px solid var(--doc-rule); }
.demo__lbl { font-family:var(--doc-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--doc-faint); }
.demo__chips { display:flex; gap:6px; flex-wrap:wrap; }
.demo__chip { display:flex; align-items:center; gap:7px; font-family:var(--doc-sans); font-size:13px; font-weight:600; color:var(--doc-ink); background:#fff; border:1px solid var(--doc-rule-2); border-radius:999px; padding:6px 12px; cursor:pointer; }
.demo__chip:hover { border-color:var(--doc-ink); }
.demo__chip[aria-pressed="true"] { background:var(--doc-ink); color:#fff; border-color:var(--doc-ink); }
.demo__chip:focus-visible { outline:2px solid var(--doc-ink); outline-offset:1px; }
.demo__sw { width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.18); }
.demo__sig { margin-left:auto; font-family:var(--doc-mono); font-size:10.5px; color:#4a473f; }
.demo__sig b { color:var(--doc-ink); }

/* the painted, skinned surface that holds real components */
.demo__surface { background:var(--color-bg); color:var(--color-fg); font-family:var(--font-body); padding:clamp(20px,4vw,36px); display:grid; gap:var(--space-6); }
.demo__eyebrow { font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--color-muted); margin:0; }
.demo__h { font-family:var(--font-display); font-size:clamp(var(--text-3xl),5vw,var(--text-5xl)); line-height:1.04; letter-spacing:-0.015em; color:var(--color-fg); margin:6px 0 0; font-weight:700; text-wrap:balance; }
[data-type="anton"] .demo__h, [data-type="archivo"] .demo__h { text-transform:uppercase; font-weight:400; letter-spacing:0; }
[data-type="dmserif"] .demo__h { font-weight:400; }
.demo__row { display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center; }
.demo__cards { display:grid; grid-template-columns:1fr; gap:var(--space-4); }
@media (min-width:620px){ .demo__cards { grid-template-columns:1fr 1fr; } }

/* footer */
footer.foot { padding:40px 0 70px; }
.foot-row { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--doc-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--doc-faint); }