/* Design system docs: layout + demos */
html{ scroll-behavior: smooth; }
body{ background: var(--mos-ivory, #FCF9E8) !important; }

.page-wrap{
  max-width: none;
  margin: 0;
  padding: calc(var(--space-block) * 1.25);
}
@media (max-width: 520px){
  .page-wrap{ padding: var(--space-block); }
}
.page-card{
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: var(--space-block);
  margin-top: var(--space-block);
}

.page-brand{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-field);
  margin: 0 0 var(--space-block) 0;
}
.page-brand__left{
  display: flex;
  align-items: center;
  gap: var(--space-field);
  min-width: 0;
}
.page-brand__logo{
  height: 34px;
  width: auto;
  display: block;
}
.page-brand__logo--right{
  height: 26px;
  width: auto;
  display: block;
  opacity: 0.9;
}

.app-body{ min-height: auto; gap: var(--space-block); }
.main{
  padding-left: calc(var(--space-block) * 1.25) !important;
  padding-right: calc(var(--space-block) * 1.25) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
@media (max-width: 520px){
  .main{
    padding-left: var(--space-block) !important;
    padding-right: var(--space-block) !important;
  }
}
.main-card{
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.sidebar{
  width: 220px;
  padding: calc(var(--s8) * 2);
  background: var(--surface-card) !important;
  border-right: 1px solid var(--border-subtle) !important;
  position: sticky;
  top: var(--space-block);
  align-self: flex-start;
  border-radius: 10px;
}
.nav-item{ padding: calc(var(--s8) * 0.9) calc(var(--s8) * 1.25); }

.field-label{ text-transform: none; letter-spacing: normal; }

/* Section spacing */
.ds-preview-section{
  scroll-margin-top: 84px;
  margin-top: var(--space-section);
  padding-top: var(--space-section);
  border-top: 1px solid var(--border-subtle);
}
.ds-preview-section:first-of-type{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.panel-title{ margin-bottom: 6px; }
.helper-text{ margin: 0 0 var(--space-block) 0; }

/* Swatches & copy */
.ds-color-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1100px){ .ds-color-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .ds-color-grid{ grid-template-columns: 1fr; } }
.ds-swatch{
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--surface-card);
  overflow: hidden;
}
.ds-swatch__chip{
  height: 54px;
  background: var(--swatch);
  border-bottom: 1px solid var(--border-subtle);
}
.ds-swatch__body{ padding: 10px 12px 12px; }
.ds-swatch__name{
  font-weight: 800;
  color: var(--header-text);
  margin: 0 0 6px 0;
}
.ds-swatch__meta{
  margin: 0;
  font-size: 0.82rem;
  color: var(--header-muted);
  line-height: 1.35;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ds-copy-btn{
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-panel);
  color: var(--header-text);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.ds-copy-btn:hover{ filter: brightness(0.98); }
.ds-copy-btn:active{ transform: translateY(0.5px); }

.ds-gradient{
  height: 54px;
  border-radius: 10px;
  border: 1px solid var(--border-default);
  background: var(--grad);
}
.ds-gradient-wrap{
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.ds-gradient-wrap .ds-gradient{ border-radius: 10px; }
.ds-gradient-copy{
  position: absolute;
  right: 8px;
  top: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.72rem;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--header-text);
  cursor: pointer;
  font-weight: 800;
}