/* ============================================================
   DESIGN SYSTEM PAGE — layout for this page only.
   Components/tokens come from tokens.css + main.css.
   ============================================================ */
.ds-shell {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(90px, 12vh, 140px) var(--gutter) var(--section-y);
}

/* header */
.ds-header { margin-bottom: clamp(48px, 8vw, 96px); }
.ds-header .display { max-width: 18ch; }
.ds-header p { color: var(--muted); max-width: 60ch; margin: 1.2rem 0 0; }

/* table of contents */
.ds-toc {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 2rem 0 0;
  font-family: var(--mono); font-size: 0.78rem;
}
.ds-toc a {
  padding: 6px 12px; border: var(--border); border-radius: var(--r-pill);
  color: var(--muted); transition: border-color var(--t), color var(--t);
}
.ds-toc a:hover { border-color: var(--accent); color: var(--fg); }

/* sections inside DS */
.ds-section { padding: clamp(48px, 7vw, 88px) 0; border-top: var(--border); }
.ds-section > h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 3rem); margin: 0 0 6px;
}
.ds-section__note { color: var(--muted); margin: 0 0 36px; max-width: 64ch; }

.ds-subhead {
  font-family: var(--mono); font-size: 0.76rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--accent); margin: 40px 0 18px;
}

/* generic preview surface */
.ds-demo {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  padding: 28px; border: var(--border); border-radius: var(--r-md);
  background: var(--bg-elev);
}
.ds-demo--stack { flex-direction: column; align-items: stretch; }

/* color swatches */
.ds-swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.ds-swatch {
  border: var(--border); border-radius: var(--r-md); overflow: hidden;
  background: var(--bg-elev);
}
.ds-swatch__chip { height: 88px; border-bottom: var(--border); }
.ds-swatch__meta { padding: 12px 14px; }
.ds-swatch__name { font-family: var(--sans); font-weight: 600; font-size: 0.9rem; }
.ds-swatch__var, .ds-swatch__val {
  display: block; font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  margin-top: 3px; word-break: break-all;
}
.ds-swatch__var { color: var(--accent); cursor: copy; }

/* type specimens */
.ds-type-row { padding: 18px 0; border-bottom: var(--border); }
.ds-type-row:last-child { border-bottom: 0; }
.ds-type-row__label {
  font-family: var(--mono); font-size: 0.72rem; color: var(--muted);
  margin: 0 0 8px;
}

/* spacing / radii visual */
.ds-scale { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-end; }
.ds-scale__item { text-align: center; font-family: var(--mono); font-size: 0.7rem; color: var(--muted); }
.ds-scale__box { background: var(--accent-soft); border: 1px solid var(--accent); margin: 0 auto 8px; }
.ds-radii { display: flex; flex-wrap: wrap; gap: 22px; }
.ds-radii__box {
  width: 96px; height: 96px; background: var(--bg-elev-2); border: var(--border);
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--mono); font-size: 0.7rem; color: var(--muted); padding-bottom: 8px;
}

/* small mono caption under demos */
.ds-caption { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin: 12px 0 0; }
.ds-caption code { color: var(--accent); }

/* tiny toast on copy */
.ds-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: var(--accent); color: #fff; font-family: var(--mono); font-size: 0.78rem;
  padding: 10px 18px; border-radius: var(--r-pill); opacity: 0; pointer-events: none;
  transition: opacity var(--t), transform var(--t); z-index: 99;
}
.ds-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }