:root {
	/* Useful non-semantic colors */
	--non-semantic-color-neutral-100: hsl(0, 0%, 100%);
	--non-semantic-color-neutral-98: hsl(0, 0%, 98%);
	--non-semantic-color-neutral-40: hsl(0, 0%, 40%);
	--non-semantic-color-neutral-25: hsl(0, 0%, 25%);
	--non-semantic-color-neutral-13: hsl(0, 0%, 13%);
	--non-semantic-color-neutral-0: hsl(0, 0%, 0%);

	--non-semantic-color-coral-50: #efc2c2;
	--non-semantic-color-coral-75: #f18aa6;
	--non-semantic-color-coral-100: #ec6086;

	--non-semantic-color-accessible-red: rgb(214, 100, 30);
	--non-semantic-color-accessible-green: rgb(43, 159, 120);

	/* Semantic (generally not changed by themes) */
	--color-success: var(--non-semantic-color-accessible-green);
	--color-error: var(--non-semantic-color-accessible-red);
	--color-warning: rgb(255, 209, 66);
	--color-highlight: rgb(253, 182, 0);
	--color-highlight-text: var(--non-semantic-color-neutral-13);

	/* Accent colors, useful for organising lists */
	--color-accent-mint: #daffe7;
	--color-accent-blue: #90dcff;
	--color-accent-pink: #e1c7f5;
	--color-accent-purple: #ffabdb;
	--color-accent-orange: #ff7f0f;
	--color-accent-red: #ff4e36;
}

/* ️✈️ Aero Theme (default)*/
:root,
[data-theme='aero'] {
	/* Primary */
	--color-primary-dark: rgb(31, 45, 62);
	--color-primary: rgb(73, 89, 105);
	--color-primary-light: rgb(129, 165, 200);

	--color-primary-text: var(--non-semantic-color-neutral-98);
	--color-primary-text-active: var(--non-semantic-color-neutral-100);

	/* Secondary */
	--color-secondary-dark: rgb(216, 216, 216);
	--color-secondary: rgb(223, 223, 223);
	--color-secondary-light: rgb(239, 239, 239);

	--color-secondary-text: var(--non-semantic-color-neutral-13);
	--color-secondary-text-active: var(--non-semantic-color-neutral-25);

	/* Borders */
	--color-border-dark: rgba(0, 0, 0, 0.2);
	--color-border: rgba(0, 0, 0, 0.15);
	--color-border-light: rgba(0, 0, 0, 0.05);

	/* Selected */
	--color-selected: var(--color-primary-light);
	--color-selected-text: var(--non-semantic-color-neutral-98);
}

/* 🖍 Pastel */
[data-theme='pastel'] {
	/* Primary */
	--color-primary-dark: rgb(31, 45, 62);
	--color-primary: var(--non-semantic-color-coral-50);
	--color-primary-light: var(--non-semantic-color-coral-100);

	--color-primary-text: var(--non-semantic-color-neutral-13);
	--color-primary-text-active: var(--non-semantic-color-neutral-0);

	/* Secondary */
	--color-secondary-dark: var(--non-semantic-color-neutral-40);
	--color-secondary: var(--non-semantic-color-neutral-98);
	--color-secondary-light: var(--non-semantic-color-neutral-100);

	--color-secondary-text: var(--non-semantic-color-neutral-13);
	--color-secondary-text-active: var(--non-semantic-color-neutral-0);

	/* Borders */
	--color-border-dark: rgba(0, 0, 0, 0.2);
	--color-border: rgba(0, 0, 0, 0.15);
	--color-border-light: rgba(0, 0, 0, 0.05);

	/* Cards and pop overs */

	/* Selected */
	--color-selected: var(--non-semantic-color-coral-100);
	--color-selected-text: var(--non-semantic-color-neutral-98);
}

/* 🦇 Goth */
[data-theme='goth'] {
	/* Primary */
	--color-primary-dark: #1c1c1c;
	--color-primary: #2c2c2c;
	--color-primary-light: #303030;

	--color-primary-text: var(--non-semantic-color-neutral-98);
	--color-primary-text-active: var(--non-semantic-color-neutral-100);

	/* Secondary */
	--color-secondary-dark: #303030;
	--color-secondary: #303030;
	--color-secondary-light: #303030;

	--color-primary-text: var(--non-semantic-color-neutral-98);
	--color-primary-text-active: var(--non-semantic-color-neutral-100);

	/* Borders */
	--color-border-dark: rgba(0, 0, 0, 0.2);
	--color-border: rgba(0, 0, 0, 0.15);
	--color-border-light: rgba(0, 0, 0, 0.05);

	/* Selected */
	--color-selected: var(--color-primary-light);
	--color-selected-text: var(--non-semantic-color-neutral-98);
}