: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: 211 100% 31%;
  --brand-primary-foreground: 0 0% 100%;
  --brand-primary-darken: 215 75% 27%;
  --brand-primary-darken-foreground: 0 0% 100%;
  --brand-secondary: 52 100% 50%;
  --brand-secondary-foreground: 0 0% 0%;
  --brand-secondary-darken: 51 81% 43%;
  --brand-secondary-darken-foreground: 0 0% 0%;
  --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;
}