/* Design system page. Shows the tokens and components from site.css as they are used. */

.ds{padding-block:clamp(40px,8vw,96px) clamp(72px,10vw,140px)}
.ds-section{display:grid;gap:22px;padding-block:clamp(40px,7vw,72px);border-top:var(--rule)}
.ds-section>h2{font:800 clamp(1.6rem,5vw,2.4rem)/1.08 var(--display)}
.ds-section>p{max-width:62ch;color:var(--ink-2)}
.ds-sub{font:700 1rem/1.3 var(--body);margin-top:10px}
.ds-grid{display:grid;gap:18px}
@media (min-width:720px){.ds-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 40px}}
@media (min-width:1100px){.ds-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}

.swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (min-width:720px){.swatches{grid-template-columns:repeat(4,minmax(0,1fr))}}
.swatch{display:grid;gap:6px;font-size:.88rem}
.swatch i{display:block;height:72px;background:var(--c);box-shadow:inset 0 0 0 1px var(--line)}
.swatch b{font-weight:700}
.swatch code,.token{font:500 .82rem/1.3 var(--mono);color:var(--mute)}
.swatch.is-hatch i{color:var(--doubt-ink);background:var(--hatch);box-shadow:inset 0 0 0 1.5px var(--doubt-ink)}

.type-row{display:grid;gap:8px;padding-block:18px;border-top:1px solid var(--line-strong)}
.type-row:first-of-type{border-top:0}
.type-sample-display{font:800 clamp(2.2rem,9vw,4.4rem)/1.04 var(--display);letter-spacing:-.012em}
.type-sample-body{font:400 1.1rem/1.55 var(--body);max-width:52ch}
.type-sample-num{font:800 clamp(2.4rem,10vw,4.4rem)/1 var(--display);font-variant-numeric:tabular-nums lining-nums}

.shape-row{display:flex;flex-wrap:wrap;gap:22px;align-items:end}
.shape{display:grid;gap:8px;font-size:.86rem}
.shape i{display:block;width:88px;height:64px;background:var(--bone-2);border:var(--rule)}
.shape.is-control i{height:44px;border-radius:var(--radius-s)}
.shape.is-round i{width:44px;height:44px;border:0;border-radius:var(--round);background:var(--signal)}

.demo{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.demo-panel{padding:20px;background:var(--bone-2)}
.demo-night{padding:20px;background:var(--night);color:var(--bone)}
.demo-meter{display:grid;gap:10px}
.demo-meter .meter-track{position:relative;height:14px;background:var(--night-3)}
.demo-meter .meter-fill{position:absolute;inset:0 auto 0 0}
.demo-meter .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.demo-meter strong{font:800 2rem/1 var(--display);font-variant-numeric:tabular-nums lining-nums}
.tone-doubt{color:var(--doubt)}
.tone-signal{color:var(--signal-hot)}
.fill-doubt{width:41%;color:var(--doubt);background:var(--hatch);box-shadow:inset 0 0 0 1.5px var(--doubt)}
.fill-signal{width:78%;background:var(--signal-hot)}
.demo-threshold{position:absolute;left:55%;top:-6px;bottom:-6px;width:2px;background:var(--bone)}

.marbles{display:flex;gap:10px;align-items:center}
.marbles i{width:22px;height:22px;border-radius:var(--round);background:var(--ink)}
.marbles .m-signal{background:var(--signal)}
.marbles .m-doubt{background:transparent;box-shadow:inset 0 0 0 6px var(--doubt-ink)}

.never{list-style:none;margin:0;padding:0;display:grid;border-bottom:var(--rule)}
.never li{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--line-strong)}
.never li:first-child{border-top:0}
.never b{font:800 1.15rem/1.2 var(--display)}
.never span{color:var(--ink-2);max-width:66ch}
@media (min-width:900px){.never li{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px}}

.ds-sources{font-size:.92rem;color:var(--ink-2)}
.ds-sources li{margin:.35em 0}
.ds-sources a{text-decoration-color:var(--signal);text-underline-offset:3px}