/* design-system — the catalogue page (#/design-system). Tokens and shared components only. */
@layer pages {
  .ds-page { gap: var(--sp-6); }
  .ds-toc { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  .ds-toc a { padding: 6px var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
  .ds-toc a:hover { background: var(--surface-3); color: var(--text); }
  .ds-section { display: flex; flex-direction: column; gap: var(--sp-5); scroll-margin-top: 140px; }
  .ds-sub { margin-top: var(--sp-2); font: var(--fw-semibold) var(--fs-xs) / 1.3 var(--font-ui); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: var(--sp-1); }
  .ds-section code { font: var(--fw-medium) var(--fs-xs) / 1.4 var(--font-mono); color: var(--text-2); }

  .ds-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-4); }
  .ds-principles > div { padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .ds-principles b { display: block; font: var(--fw-semibold) var(--fs-h3) / 1.3 var(--font-display); letter-spacing: .02em; text-transform: uppercase; margin-bottom: var(--sp-1); }
  .ds-principles p { color: var(--text-2); font-size: var(--fs-sm); }

  .ds-logo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-6); padding: var(--sp-6);
    border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border-subtle); }
  .ds-logo-lockup { display: flex; align-items: center; gap: var(--sp-4); }
  .ds-logo-lockup .brand-mark { height: 64px; }
  .ds-logo-lockup .brand-wordmark { height: 30px; }
  .ds-logo-sizes { display: flex; align-items: flex-end; gap: var(--sp-5); }
  .ds-logo-sizes .ds-logo-96 { height: 96px; }
  .ds-logo-sizes .ds-logo-48 { height: 48px; }
  .ds-logo-sizes .ds-logo-16 { height: 16px; }

  .ds-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--sp-3); }
  .ds-swatch { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r-md); border: 1px solid var(--border-subtle); background: var(--surface-2); }
  .ds-swatch > div { display: flex; flex-direction: column; min-width: 0; }
  .ds-swatch b { font-size: var(--fs-ui); font-weight: var(--fw-semibold); }
  .ds-swatch small { font-size: var(--fs-xs); color: var(--text-3); line-height: 1.35; }
  .ds-chip { flex: none; width: 52px; height: 52px; border-radius: var(--r-sm); box-shadow: inset 0 0 0 1px var(--border); background-clip: padding-box; }
  .ds-tints { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

  .ds-types { display: flex; flex-direction: column; }
  .ds-type { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle); }
  .ds-type:last-child { border-bottom: 0; }
  .ds-type-spec { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text-2); }
  .ds-type-spec small { font-size: var(--fs-xs); color: var(--text-3); }
  .ds-table { max-width: 720px; }

  .ds-spaces { display: flex; flex-direction: column; gap: var(--sp-2); }
  .ds-space { display: grid; grid-template-columns: 80px 90px 1fr; align-items: center; gap: var(--sp-3); }
  .ds-space span { grid-column: 1; height: 12px; border-radius: 3px; background: var(--brand); }
  .ds-radii { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-4); }
  .ds-radius { display: flex; flex-direction: column; gap: var(--sp-1); }
  .ds-radius span { height: 64px; border: 2px solid var(--brand-border); background: var(--brand-soft); }
  .ds-radius small { font-size: var(--fs-xs); color: var(--text-3); }
  .ds-shadows { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-6); padding: var(--sp-4); border-radius: var(--r-md); background: var(--bg); }
  .ds-shadows > div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-5); border-radius: var(--r-lg); background: var(--surface-overlay); border: 1px solid var(--border-subtle); }
  .ds-shadows small { font-size: var(--fs-xs); color: var(--text-3); }

  .ds-matrix { display: flex; flex-direction: column; }
  .ds-row { display: grid; grid-template-columns: 220px 1fr; gap: var(--sp-4); align-items: center; padding: var(--sp-4) 0; border-bottom: 1px solid var(--border-subtle); }
  .ds-row:last-child { border-bottom: 0; }
  .ds-row-head { display: flex; flex-direction: column; gap: 2px; }
  .ds-row-head small { font-size: var(--fs-xs); color: var(--text-3); }
  .ds-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-3); }
  .ds-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
  .ds-cell-demo { min-height: var(--h-xl); display: flex; align-items: center; max-width: 100%; }
  .ds-cell small { font-size: var(--fs-xs); color: var(--text-3); }
  .ds-cell .btn.go { --btn-h: var(--h-lg); padding: 0 var(--sp-5); font-size: var(--fs-lg); }
  .ds-inputs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .ds-inputs input { width: 100%; }
  .ds-sizes { gap: var(--sp-3); }
  .ds-form { margin-top: var(--sp-2); }
  .ds-area { max-width: 640px; }
  .ds-choices { gap: var(--sp-5); }
  .ds-paging { padding: 0; }
  .ds-paging .pagination { border-top: 0; }
  .ds-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-4); }
  .ds-meters > div { display: flex; flex-direction: column; gap: 6px; }
  .ds-meters small { font-size: var(--fs-xs); color: var(--text-3); }
  .ds-skeletons { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 420px; }
  .ds-dialog { animation: none; max-width: 460px; }
  .ds-tiles { gap: var(--sp-3); }
  .ds-toasts { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 460px; }
  .ds-toasts .toast-item { animation: none; }
  .ds-structure { margin: 0; padding-left: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
  .ds-structure li { padding-left: var(--sp-2); color: var(--text-2); }
  .ds-structure li::marker { color: var(--brand-text); font-weight: var(--fw-bold); }
  .ds-structure b { color: var(--text); margin-right: var(--sp-2); }
  @media (max-width: 720px) { .ds-row, .ds-type { grid-template-columns: 1fr; gap: var(--sp-3); } .ds-toc { position: static; } }
}