:root {
  --background: 0 0% 95%;
  --foreground: 0 0% 28%;
  --button-radius: var(--radius);
  --card: 0 0% 100%;
  --card-foreground: var(--foreground);
  --card-radius: var(--radius);
  --card-padding: 1rem;
  --card-shadow: 0 1px 3px 0 rgb(0 10 20 / 0.1),
    0 1px 2px -1px rgb(0 10 20 / 0.1);
  --card-hover-shadow: 0 10px 15px 0 rgb(0 10 20 / 0.1),
    0 4px 6px -4px rgb(0 10 20 / 0.1);
  --popover: 0 0% 100%;
  --popover-foreground: var(--foreground);
  --brand-primary: 26 91% 55%;
  --brand-primary-foreground: 0 0% 100%;
  --brand-primary-darken: 26 70% 44%;
  --brand-primary-darken-foreground: 0 0% 100%;
  --brand-secondary: 210 100% 28%;
  --brand-secondary-foreground: 0 0% 100%;
  --brand-secondary-darken: 214 76% 25%;
  --brand-secondary-darken-foreground: 0 0% 100%;
  --muted: 0 0% 95%;
  --muted-foreground: 0 0% 28%;
  --accent: 0 0% 97%;
  --accent-foreground: 0 0% 9%;
  --highlight: var(--brand-primary);
  --highlight-foreground: var(--brand-primary-foreground);
  --border: 0 0% 95%;
  --input: 0 0% 82%;
  --ring: var(--brand-primary);
  --radius: 0.375rem;
}

#root > div > div.lg\:tw-col-span-1.lg\:tw-self-end > button {
  background-color: hsl(var(--brand-primary)) !important;
  color: hsl(var(--brand-primary-foreground)) !important;

  &:hover {
    background-color: hsl(var(--brand-primary-darken)) !important;
    color: hsl(var(--brand-primary-darken-foreground)) !important;
  }
}