:root {
  --color-black: #000000;
  --color-blue: #93defb;
  --color-blue-soft: #b3e8fc;
  --color-blue-tint: #d4f2fd;
  --color-cream: #faf3eb;
  --color-cream-soft: #fdf9f5;
  --color-green-bright: #7ceeb3;
  --color-green-dark: #012920;
  --color-green-soft: #c5f3d9;
  --color-green-tint: #d6f7e4;
  --color-green-primary: #00a882;
  --color-green-aqua: #66cdaa;
  --color-lilac: #cec8fc;
  --color-lilac-active: #a69df9;
  --color-lilac-soft: #ddd9fd;
  --color-lilac-tint: #ebe9fe;
  --color-peach: #ffe0bb;
  --color-peach-soft: #ffdbaf;
  --color-peach-tint: #ffead1;
  --color-red-soft: #ff8888;
  --color-rose: #ffbdc7;
  --color-rose-soft: #ffd1d8;
  --color-rose-tint: #ffe5e9;
  --color-white: #ffffff;

  /* Semantic colors */
  --color-border: var(--color-green-dark);
  --color-input: var(--color-green-dark);
  --color-ring: var(--color-green-bright);
  --color-background: var(--color-white);
  --color-foreground: var(--color-green-dark);
  --color-primary: var(--color-green-bright);
  --color-primary-foreground: var(--color-green-dark);
  --color-secondary: var(--color-lilac);
  --color-secondary-foreground: var(--color-green-dark);
  --color-destructive: var(--color-rose);
  --color-destructive-foreground: var(--color-green-dark);
  --color-info: var(--color-blue);
  --color-info-foreground: var(--color-green-dark);
  --color-success: var(--color-green-bright);
  --color-success-foreground: var(--color-green-dark);
  --color-success-primary: var(--color-green-aqua);
  --color-warning: var(--color-lilac);
  --color-warning-foreground: var(--color-green-dark);
  --color-error: var(--color-rose);
  --color-error-foreground: var(--color-green-dark);
  --color-error-primary: var(--color-red-soft);
  --color-muted: var(--color-green-soft);
  --color-muted-foreground: var(--color-green-dark);
  --color-accent: var(--color-blue);
  --color-accent-foreground: var(--color-green-dark);
  --color-popover: var(--color-green-soft);
  --color-popover-foreground: var(--color-green-dark);
  --color-card: var(--color-cream);
  --color-card-foreground: var(--color-green-dark);
}

.background-blue {
  background-color: var(--color-blue);
}

.background-rose {
  background-color: var(--color-rose);
}

.background-peach {
  background-color: var(--color-peach);
}

.background-lilac {
  background-color: var(--color-lilac);
}

.background-cream {
  background-color: var(--color-cream);
}

.background-green {
  background-color: var(--color-green-soft);
}