/* Project-specific styles; prefer Bootstrap utilities for layout. */
:root {
  color-scheme: light;
}

/* A physical color sample paired with an exact, editable value. */
.color-control {
  padding: .625rem .875rem .625rem .625rem;
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .75rem;
  background: var(--bs-body-bg, #fff);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.color-control:focus-within {
  border-color: var(--bs-primary, #0d6efd);
  box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb, 13, 110, 253), .15);
}

.color-control input[type="color"] {
  flex: 0 0 3rem;
  width: 3rem;
  height: 3rem;
  padding: .25rem;
  border-radius: .625rem;
  cursor: pointer;
}

.color-control input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-control input[type="color"]::-webkit-color-swatch {
  border: 0;
  border-radius: .375rem;
}

.color-control input[type="color"]::-moz-color-swatch {
  border: 0;
  border-radius: .375rem;
}

.color-code {
  min-width: 0;
}

.color-code .color-code-input {
  min-height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--bs-font-monospace);
  font-size: .9375rem;
  font-weight: 500;
  box-shadow: none;
}

.color-code-input:focus-visible {
  outline: 2px solid var(--bs-primary, #0d6efd);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .color-control {
    transition: none;
  }
}