/* Color vars */
:root {
  --color-primary-light: #f1ffe7;
  --color-secondary-light: #ffd6af;
  --color-accent-light: #70e0ba;

  --color-primary-dark: #363457;
  --color-secondary-dark: #403f4c;
  --color-accent-dark: #e0707a;
}

/* Light scheme */
:root {
  --color-bg-primary: var(--color-primary-light);
  --color-bg-secondary: var(--color-secondary-light);
  --color-bg-accent: var(--color-accent-light);

  --color-text-primary: var(--color-secondary-dark);
  --color-text-secondary: var(--color-primary-dark);
  --color-accent: var(--color-accent-light);
}

.scheme-flip {
  --color-bg-primary: var(--color-primary-dark);
  --color-bg-secondary: var(--color-secondary-dark);
  --color-bg-accent: var(--color-accent-dark);

  --color-text-primary: var(--color-secondary-light);
  --color-text-secondary: var(--color-primary-light);
  --color-accent: var(--color-accent-dark);
}

/* Dark scheme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: var(--color-primary-dark);
    --color-bg-secondary: var(--color-secondary-dark);
    --color-bg-accent: var(--color-accent-dark);

    --color-text-primary: var(--color-primary-light);
    --color-text-secondary: var(--color-secondary-light);
    --color-accent: var(--color-accent-dark);
  }

  .scheme-flip {
    --color-bg-primary: var(--color-primary-light);
    --color-bg-secondary: var(--color-secondary-light);
    --color-bg-accent: var(--color-accent-light);

    --color-text-primary: var(--color-secondary-dark);
    --color-text-secondary: var(--color-primary-dark);
    --color-accent: var(--color-accent-light);
  }
}

/* Apply defaults */
:root {
  color: var(--color-text-primary);
  background-color: var(--color-bg-primary);
}

/* Helpers */

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

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

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

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

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

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

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

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

.b--accent {
  border-color: var(--color-accent);
}