/* Colors Styles */

:root {
  /* Brand primitives */
  --color-white: #ffffff;
  --color-black: #121212;
  --color-red: #f26c6c;
  --color-orange: #f3a06b;
  --color-yellow: #ffd24d;
  --color-green: #59c07d;
  --color-blue: #79bce8;
  --color-pink: #fceaf5;
  --color-sage: #c8d9d1;

  /* Base semantic */
  --color-background: #fffcf1;
  --color-foreground: var(--color-black);
  --color-surface: var(--color-white);
  --color-border: var(--color-black);

  /* Accent semantic */
  --color-accent: #0c0;
  --color-highlight: var(--color-pink);
  --color-info: var(--color-blue);
  --color-success: var(--color-green);
  --color-warning: var(--color-yellow);
  --color-error: var(--color-red);
}

.theme-dark {
  /* Brand primitive shifts for dark */
  --color-red: #c13d3d;
  --color-yellow: #d9a305;
  --color-green: #2e8c51;
  --color-blue: #3d87b5;

  /* Base semantic */
  --color-background: var(--color-black);
  --color-foreground: #f5f5f5;
  --color-surface: #130f40;
  --color-border: #e0bcd3;

  /* Accent semantic */
  --color-accent: var(--color-pink);
  --color-highlight: #94e59c;
}

/* Opacity/Transparency */
.opacity-100 {
  opacity: 1;
}

.opacity-80 {
  opacity: 0.8;
}

.opacity-60 {
  opacity: 0.6;
}

.opacity-40 {
  opacity: 0.4;
}

.opacity-20 {
  opacity: 0.2;
}

/* Background Colors — semantic */
.bg-background {
  background-color: var(--color-background);
}

.bg-foreground {
  background-color: var(--color-foreground);
}

.bg-surface {
  background-color: var(--color-surface);
}

.bg-border {
  background-color: var(--color-border);
}

.bg-accent {
  background-color: var(--color-accent);
}

.bg-highlight {
  background-color: var(--color-highlight);
}

.bg-info {
  background-color: var(--color-info);
}

.bg-success {
  background-color: var(--color-success);
}

.bg-warning {
  background-color: var(--color-warning);
}

.bg-error {
  background-color: var(--color-error);
}

/* Background Colors — brand primitives */
.bg-white {
  background-color: var(--color-white);
}

.bg-black {
  background-color: var(--color-black);
}

.bg-red {
  background-color: var(--color-red);
}

.bg-orange {
  background-color: var(--color-orange);
}

.bg-yellow {
  background-color: var(--color-yellow);
}

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

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

.bg-pink {
  background-color: var(--color-pink);
}

.bg-sage {
  background-color: var(--color-sage);
}

/* Text Colors — semantic */
.text-background {
  color: var(--color-background);
}

.text-foreground {
  color: var(--color-foreground);
}

.text-surface {
  color: var(--color-surface);
}

.text-border {
  color: var(--color-border);
}

.text-accent {
  color: var(--color-accent);
}

.text-highlight {
  color: var(--color-highlight);
}

.text-info {
  color: var(--color-info);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

/* Text Colors — brand primitives */
.text-white {
  color: var(--color-white);
}

.text-black {
  color: var(--color-black);
}

.text-red {
  color: var(--color-red);
}

.text-orange {
  color: var(--color-orange);
}

.text-yellow {
  color: var(--color-yellow);
}

.text-green {
  color: var(--color-green);
}

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

.text-pink {
  color: var(--color-pink);
}

.text-sage {
  color: var(--color-sage);
}