/* ------------------------------------------------------------------
   design-system.css: layout for design-system.html only.
   Reuses tokens.css and the component styles in main.css.
   ------------------------------------------------------------------ */

body.ds{
  display:block;
  background-attachment: fixed;
  padding: 48px 24px 80px;
}

.ds-page{
  max-width: 960px;
  margin: 0 auto;
}

.ds-header{ margin-bottom: 40px; }
.ds-header h1{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  margin: 12px 0 10px;
}
.ds-header p{
  color: var(--color-ink-soft);
  line-height: 1.6;
  max-width: 60ch;
  margin: 0;
}
.ds-back{
  color: var(--color-accent-dark);
  font-weight: 600;
  text-decoration: none;
}
.ds-back:hover{ text-decoration: underline; }
.ds-back:focus-visible{ outline: 2px solid var(--color-ink); outline-offset: 2px; }

code{
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--color-accent-tint);
  padding: 1px 5px;
  border-radius: 4px;
}

.ds-section{
  background: var(--color-panel);
  border: 1.5px solid var(--color-panel-edge);
  border-radius: var(--radius-panel);
  padding: 28px;
  margin-bottom: 24px;
}
.ds-section h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  margin: 0 0 18px;
}
.ds-section h3{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  margin: 0 0 12px;
}
.ds-note{
  color: var(--color-ink-soft);
  line-height: 1.6;
  margin: -6px 0 18px;
  max-width: 70ch;
}

/* ---------- color ---------- */
.ds-swatches{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.ds-swatch{
  border: 1.5px solid var(--color-panel-edge);
  border-radius: 10px;
  overflow:hidden;
  background: #fff;
}
.ds-swatch-chip{
  height: 72px;
  border-bottom: 1.5px solid var(--color-panel-edge);
}
.ds-swatch-meta{ padding: 10px 12px 12px; font-size: 0.85rem; line-height: 1.45; }
.ds-swatch-meta strong{ display:block; font-weight:600; }
.ds-swatch-meta .ds-var{ font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-ink-soft); word-break: break-all; }
.ds-swatch-meta .ds-desc{ color: var(--color-ink-soft); margin-top: 4px; }

/* ---------- type ---------- */
.ds-type{ display:grid; gap: 20px; }
.ds-type-row{
  display:grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items:baseline;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--color-line);
}
.ds-type-row:last-child{ border-bottom: none; padding-bottom: 0; }
.ds-type-label{ font-size: 0.85rem; line-height: 1.45; }
.ds-type-label .ds-var{ font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-ink-soft); }
.ds-type-sample{ font-size: 1.6rem; line-height: 1.3; }

/* ---------- radius ---------- */
.ds-radii{ display:flex; flex-wrap:wrap; gap: 20px; }
.ds-radius{ text-align:center; font-size: 0.85rem; }
.ds-radius-box{
  width: 110px; height: 80px;
  background: var(--color-accent-tint);
  border: 1.5px solid var(--color-accent);
  margin-bottom: 8px;
}
.ds-radius .ds-var{ font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-ink-soft); display:block; }

/* ---------- tables ---------- */
.ds-table-wrap{ overflow-x:auto; }
.ds-table{
  width:100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.ds-table th, .ds-table td{
  text-align:left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-line);
  vertical-align: top;
}
.ds-table th{ font-weight:600; color: var(--color-ink-soft); }
.ds-table td code{ white-space: nowrap; }

/* ---------- motion ---------- */
.ds-motion-demo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 16px;
  margin-top: 18px;
}
.ds-motion-line{ margin: 0; flex: 1 1 260px; line-height: 1.6; }

/* ---------- components ---------- */
.ds-components{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.ds-component--wide{ grid-column: 1 / -1; }
.ds-row{ display:flex; flex-wrap:wrap; gap: 12px; align-items:center; }
.promo-card.ds-static{
  position: static;
  display: inline-flex;
  max-width: 100%;
}
.name-tag.ds-static{
  position: static;
  transform: none;
  display:inline-block;
}

/* ---------- expression sheets ---------- */
.ds-sheet{ margin-bottom: 28px; }
.ds-sheet:last-child{ margin-bottom: 0; }
.ds-sheet-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.ds-cell{
  border: 1.5px solid var(--color-panel-edge);
  border-radius: 10px;
  background: #fff;
  padding: 8px 8px 10px;
  text-align:center;
}
.ds-cell-sprite{
  width:100%;
  aspect-ratio: 436 / 682;
  background-repeat:no-repeat;
}
.ds-cell-name{ font-weight: 600; font-size: 0.85rem; margin-top: 6px; }
.ds-cell-pos{ font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-ink-soft); }

.ds-error{
  color: var(--color-accent-dark);
  line-height: 1.6;
}

@media (max-width: 640px){
  body.ds{ padding: 28px 14px 60px; }
  .ds-section{ padding: 20px 16px; }
  .ds-type-row{ grid-template-columns: 1fr; gap: 6px; }
  .ds-sheet-grid{ grid-template-columns: repeat(2, 1fr); }
}