:not(:defined) {
  visibility: hidden;
}

:root {
  --tuc-color-amber: #e36825;
  --tuc-color-orange: #f5ac47;
  --tuc-color-green: #6da06c;
  --tuc-color-gray: #585b5c;
}

:root,
:host,
.sl-theme-light {
  --sl-color-primary-50: var(--sl-color-amber-50) !important;
  --sl-color-primary-100: var(--sl-color-amber-100) !important;
  --sl-color-primary-200: var(--sl-color-amber-200) !important;
  --sl-color-primary-300: var(--sl-color-amber-300) !important;
  --sl-color-primary-400: var(--sl-color-amber-400) !important;
  --sl-color-primary-500: var(--sl-color-amber-500) !important;
  --sl-color-primary-600: var(--sl-color-amber-600) !important;
  --sl-color-primary-700: var(--sl-color-amber-700) !important;
  --sl-color-primary-800: var(--sl-color-amber-800) !important;
  --sl-color-primary-900: var(--sl-color-amber-900) !important;
  --sl-color-primary-950: var(--sl-color-amber-950) !important;
  --sl-input-focus-ring-color: hsl(from var(--sl-color-primary-500) h s l / 40%) !important;
  accent-color: var(--sl-color-primary-500);
}

body {
  background: url(/assets/bg.svg);
  background-repeat: round;
  font-family: "Montserrat";
  margin: 0;
}

sl-button.amber::part(base) {
  color: #fff;
  background-color: var(--tuc-color-amber);
  border-color: var(--tuc-color-amber);
}

sl-button.amber::part(base):hover {
  background-color: var(--tuc-color-amber);
}

sl-button.orange::part(base) {
  color: #fff;
  background-color: var(--tuc-color-orange);
  border-color: var(--tuc-color-orange);
}

sl-button.orange::part(base):hover {
  background-color: var(--tuc-color-orange);
}

sl-button.green::part(base) {
  color: #fff;
  background-color: var(--tuc-color-green);
  border-color: var(--tuc-color-green);
}

sl-button.green::part(base):hover {
  background-color: var(--tuc-color-green);
}

sl-button.gray::part(base) {
  color: #fff;
  background-color: var(--tuc-color-gray);
  border-color: var(--tuc-color-gray);
}

sl-button.gray::part(base):hover {
  background-color: var(--tuc-color-gray);
}