/* Documentation — page Couleurs
   Règles locales uniquement chargées par documentation/foundations/colors.html.
   Ne pas importer dans ds-documentation.css. */

#base-colors .app-ds-token-grid.app-ds-token-grid-wide,
#semantic-colors .app-ds-token-grid.app-ds-token-grid-wide,
#component-colors .app-ds-token-grid.app-ds-token-grid-wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.app-ds-color-group + .app-ds-color-group {
  margin-top: var(--app-space-8);
}

.app-ds-color-group .app-section-header {
  margin-bottom: var(--app-space-4);
}

.app-ds-color-ramp {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--app-color-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-xs);
  margin-bottom: var(--app-space-5);
}

.app-ds-color-ramp-step {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px;
  color: var(--app-color-text);
  border-left: 1px solid color-mix(in srgb, var(--app-color-border) 62%, transparent);
}

.app-ds-color-ramp-step:first-child {
  border-left: 0;
}

.app-ds-color-ramp-step span {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.app-ds-color-ramp-step code {
  color: var(--app-color-muted);
  font-family: var(--app-font-mono);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  #base-colors .app-ds-token-grid.app-ds-token-grid-wide,
  #semantic-colors .app-ds-token-grid.app-ds-token-grid-wide,
  #component-colors .app-ds-token-grid.app-ds-token-grid-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-ds-color-ramp {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-ds-color-ramp-step {
    border-top: 1px solid color-mix(in srgb, var(--app-color-border) 62%, transparent);
  }
}

@media (max-width: 640px) {
  #base-colors .app-ds-token-grid.app-ds-token-grid-wide,
  #semantic-colors .app-ds-token-grid.app-ds-token-grid-wide,
  #component-colors .app-ds-token-grid.app-ds-token-grid-wide {
    grid-template-columns: 1fr;
  }

  .app-ds-color-ramp {
    grid-template-columns: 1fr;
  }

  .app-ds-color-ramp-step {
    min-height: 82px;
    border-left: 0;
  }
}