/* =========================================================================
   ETÉRA HOME — Estilos exclusivos da página de style guide (não usar na LP)
   ========================================================================= */

.sg-header {
  padding-block: 48px 32px;
  border-bottom: var(--border-width-default) solid var(--gray-700);
}

.sg-header p {
  margin-top: 16px;
  color: var(--gray-500);
}

.sg-section {
  padding-block: 48px;
  border-bottom: var(--border-width-default) solid var(--gray-700);
}

.sg-section > h2 {
  margin-bottom: 32px;
}

.sg-note {
  margin-top: 24px;
  padding: 16px;
  border-left: var(--border-width-md) solid var(--feedback-color-warning);
  background-color: var(--shade-level-2);
}

.sg-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.sg-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sg-token {
  color: var(--gray-500);
  font-family: var(--font-family-02);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-default);
}

.sg-value {
  color: var(--gray-500);
}

/* Amostras de cor */
.sg-swatch {
  height: 80px;
  border-radius: var(--border-radius-xs);
  border: var(--border-width-default) solid var(--gray-700);
}

/* Amostras de sombra */
.sg-shadow {
  height: 80px;
  border-radius: var(--border-radius-xs);
  background-color: var(--gray-800);
}

.sg-shadow--sm { box-shadow: var(--shadow-sm); }
.sg-shadow--default { box-shadow: var(--shadow-default); }
.sg-shadow--lg { box-shadow: var(--shadow-lg); }

/* Amostras de raio e borda */
.sg-box {
  height: 80px;
  background-color: var(--gray-800);
  border: var(--border-width-default) solid var(--gray-600);
}

/* Amostras de opacidade / shade / tint */
.sg-tile {
  height: 80px;
  border-radius: var(--border-radius-xs);
  background-color: var(--brand-color-secondary);
}

.sg-tile--overlay {
  background-color: var(--gray-800);
}

.sg-op--default { opacity: var(--opacity-level-default); }
.sg-op--semi-opaque { opacity: var(--opacity-level-semi-opaque); }
.sg-op--intense { opacity: var(--opacity-level-intense); }
.sg-op--medium { opacity: var(--opacity-level-medium); }
.sg-op--light { opacity: var(--opacity-level-light); }
.sg-op--lighter { opacity: var(--opacity-level-lighter); }
.sg-op--faint { opacity: var(--opacity-level-faint); }
.sg-op--semi-transparent { opacity: var(--opacity-level-semi-transparent); }
.sg-op--none { opacity: var(--opacity-level-none); }

.sg-shade--1 { background-color: var(--shade-level-1); }
.sg-shade--2 { background-color: var(--shade-level-2); }
.sg-shade--3 { background-color: var(--shade-level-3); }
.sg-shade--4 { background-color: var(--shade-level-4); }

.sg-tint--1 { background-color: var(--tint-level-1); }
.sg-tint--2 { background-color: var(--tint-level-2); }
.sg-tint--3 { background-color: var(--tint-level-3); }
.sg-tint--4 { background-color: var(--tint-level-4); }

.sg-radius--none { border-radius: var(--border-radius-none); }
.sg-radius--xs { border-radius: var(--border-radius-xs); }
.sg-radius--sm { border-radius: var(--border-radius-sm); }
.sg-radius--default { border-radius: var(--border-radius-default); }
.sg-radius--lg { border-radius: var(--border-radius-lg); }
.sg-radius--pill { border-radius: var(--border-radius-pill); }
.sg-radius--circular { border-radius: var(--border-radius-circular); }

.sg-border--none { border-width: var(--border-width-none); }
.sg-border--default { border-width: var(--border-width-default); }
.sg-border--md { border-width: var(--border-width-md); }

.sg-swatch--white { background-color: var(--white); }
.sg-swatch--primary { background-color: var(--brand-color-primary); }
.sg-swatch--secondary { background-color: var(--brand-color-secondary); }
.sg-swatch--gray-500 { background-color: var(--gray-500); }
.sg-swatch--gray-600 { background-color: var(--gray-600); }
.sg-swatch--gray-700 { background-color: var(--gray-700); }
.sg-swatch--gray-800 { background-color: var(--gray-800); }
.sg-swatch--gray-900 { background-color: var(--gray-900); }
.sg-swatch--black { background-color: var(--black); }
.sg-swatch--light { background-color: var(--light); }
.sg-swatch--dark { background-color: var(--dark); }
.sg-swatch--danger { background-color: var(--feedback-color-danger); }
.sg-swatch--warning { background-color: var(--feedback-color-warning); }
.sg-swatch--success { background-color: var(--feedback-color-success); }


/* Demonstração do grid de colunas */
.sg-grid-demo > * {
  padding-block: 16px;
  border-radius: var(--border-radius-xs);
  background-color: var(--brand-color-secondary);
  text-align: center;
}

.sg-type-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-block: 24px;
  border-bottom: var(--border-width-default) solid var(--gray-800);
}

.sg-ratio {
  aspect-ratio: 16 / 9;
  border-radius: var(--border-radius-xs);
  background-color: var(--gray-800);
}

.sg-footer {
  padding-block: 32px 64px;
  color: var(--gray-500);
}