:root {
  --background: 45 15% 95%;
  --foreground: 30 15% 5%;

  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;

  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;

  --primary: 218 54% 20%;
  --primary-foreground: 43% 14% 90%;

  --secondary: 200 61% 15%;
  --secondary-foreground: 43% 14% 80%;

  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;

  --accent: 200 95% 58%;
  --accent-foreground: 30% 15% 5%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;

  --radius: 0.5rem;

  --success: 95 65% 70%;
  --success-foreground: 43 14% 90%;

  --desctructive: 0 65% 60%;
  --desctructive-foreground: 43 14% 90%;
}

.dark {
  --background: 30 15% 5%;
  --foreground: 45 15% 95%;

  --card: 0 0% 3.9%;
  --card-foreground: 0 0% 98%;

  --popover: 0 0% 3.9%;
  --popover-foreground: 0 0% 98%;

  --primary: 218 39% 53%;
  --primary-foreground: 43% 14% 90%;

  --secondary: 200 39% 53%;
  --secondary-foreground: 30 15% 5%;

  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;

  --accent: 200 95% 74%;
  --accent-foreground: 43 14% 80%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 98%;

  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;

  --success: 105 36% 30%;
  --success-foreground: 43 14% 90%;

  --desctructive: 2 49% 40%;
  --desctructive-foreground: 43 14% 90%;

  --box: 0 0% 6%;
  --box-foreground: 180 5% 4%;
}