:root {
    --white: #ffffff;

    --black: #0a0a0a;

    --white-70: #ffffff70;
    --white-10: #ffffff10;
    --white-0: #ffffff00;

    --black-70: #0a0a0a70;
    --black-10: #0a0a0a10;
    --black-0: #0a0a0a00;

    --neutral-50: #f8f8f9;
    --neutral-50-50: #f8f8f950;
    --neutral-50-0: #f8f8f900;

    --neutral-100: #f2f2f5;

    --neutral-200: #e7e7ec;

    --neutral-300: #dcdce2;

    --neutral-400: #bbbbc3;

    --neutral-500: #8a8a93;

    --neutral-600: #505052;

    --neutral-700: #3a3a3e;

    --neutral-800: #2f2f33;

    --neutral-900: #1a1a1d;

    --neutral-900-50: #1a1a1d50;
    --neutral-900-0: #1a1a1d00;

    --primary-50: #fdf2f6;

    --primary-50-50: #fdf2f650;

    --primary-100: #fce7ee;

    --primary-200: #f9d1e0;

    --primary-300: #f8a3c4;

    --primary-400: #f07ba8;

    --primary-500: #d84f76;

    --primary-600: #c63d63;

    --primary-700: #a82d50;

    --primary-700-50: #a82d5050;

    --primary-800: #8a1f3f;

    --primary-900: #5a1628;

    --green-50: #f0fdf4;

    --green-100: #dffcf0;

    --green-200: #b7f3d8;

    --green-300: #6ee7b7;

    --green-400: #4dd9a0;

    --green-500: #3ebb8e;

    --green-600: #2fa574;

    --green-700: #1e7e66;

    --green-800: #155e50;

    --green-900: #0d3d38;

    --accent-50: #f5f3ff;
    --accent-50-50: #f5f3ff50;
    --accent-100: #ede9fe;

    --accent-200: #ddd6fe;

    --accent-300: #c4c7f9;

    --accent-400: #b0b4f1;

    --accent-500: #9fa1d5;

    --accent-600: #8a8ec3;

    --accent-700: #6f73ae;

    --accent-800: #5f63ad;
    --accent-800-50: #5f63ad50;

    --accent-900: #47498b;
}
:root,
:root.dark-mode .section-dark,
:root.dark-mode .section-always-light,
:root.dark-mode .inview-to-dark.is-visible {
    --bg: var(--neutral-50);
    --bg-50: var(--neutral-50-50);
    --bg-0: var(--neutral-50-0);
    --bg-white: var(--white);
    --bg-card: var(--white);
    --hover-prime: var(--primary-500);
    --hover-accent: var(--accent-50);
    --hover-gray: var(--neutral-300);
    --border: var(--neutral-300);
    --border-dark: var(--neutral-500);
    --ghost-color: var(--neutral-300);
    --text: var(--black);
    --text-semi: var(--neutral-800);
    --text-dull: var(--neutral-500);
    --text-white: var(--white);
    --button-black: var(--black);
    --button-black-70: var(--black-70);
    --button-black-10: var(--black-10);
    --border-black: var(--black);
    --accent: var(--accent-200);
    --pink: var(--primary-300);
    --accent-dark: var(--accent-700);
    --success: var(--green-200);
}

:root.dark-mode,
:root .section-always-dark,
.section-dark,
:root:not(.dark-mode) .inview-to-dark.is-visible {
    --bg: var(--neutral-900);
    --bg-50: var(--neutral-900-50);
    --bg-0: var(--neutral-900-0);
    --bg-white: var(--neutral-800);
    --bg-card: var(--neutral-800);
    --hover-prime: var(--primary-500);
    --hover-accent: var(--accent-700);
    --hover-gray: var(--neutral-700);
    --border: var(--neutral-700);
    --border-dark: var(--neutral-500);
    --ghost-color: var(--neutral-700);
    --text: var(--white);
    --text-semi: var(--neutral-300);
    --text-dull: var(--neutral-500);
    --text-white: var(--black);
    --button-black: var(--white);
    --button-black-70: var(--white-70);
    --button-black-10: var(--white-10);
    --border-black: var(--white);
    --accent: var(--accent-700);
    --accent-dark: var(--accent-200);
    --pink: var(--primary-700);
    --success: var(--green-900);
}

/* Primary Light */
.section-primary-light,
.section-always-primary-light,
:root.dark-mode .section-always-primary-light,
:root.dark-mode .section-primary {
    --bg: var(--primary-50);
    --bg-50: var(--primary-50-50);
    --bg-white: var(--white);
    --bg-card: var(--primary-100);
    --text: var(--black);
    --text-white: var(--white);
    --text-semi: var(--neutral-900);
    --text-dull: var(--primary-500);
    --border-black: var(--black);
    --ghost-color: var(--primary-200);
    --border: var(--primary-300);
    --border-dark: var(--primary-500);
    --hover-prime: var(--primary-600);
    --hover-gray: var(--primary-200);
    --button-black: var(--black);
    --button-black-70: var(--black-70);
    --button-black-10: var(--black-10);
    --border-black: var(--black);
    --accent: var(--primary-200);
    --accent-dark: var(--primary-700);
    --pink: var(--primary-400);
}

/* Primary Dark */
.section-primary,
.section-always-primary,
:root.dark-mode .section-always-primary,
:root.dark-mode .section-primary-light {
    --bg: var(--primary-800);
    --bg-50: var(--primary-900-50);
    --bg-white: var(--primary-900);
    --bg-card: var(--primary-700);
    --text: var(--white);
    --text-semi: var(--primary-200);
    --text-dull: var(--primary-300);
    --text-white: var(--black);
    --border-black: var(--white);
    --border: var(--primary-500);
    --border-dark: var(--primary-300);
    --ghost-color: var(--primary-600);
    --hover-prime: var(--black);
    --hover-gray: var(--primary-600);
    --button-black: var(--white);
    --button-black-70: var(--white-70);
    --button-black-10: var(--white-10);
    --border-black: var(--white);
    --accent: var(--primary-700);
    --accent-dark: var(--primary-200);
    --pink: var(--primary-600);
}

/* Accent Light */
.section-accent-light,
:root.dark-mode .section-accent,
:root.dark-mode .section-always-accent-light,
.section-always-accent-light {
    --bg: var(--accent-50);
    --bg-50: var(--accent-50-50);
    --bg-white: var(--white);
    --bg-card: var(--accent-100);
    --text: var(--black);
    --text-semi: var(--accent-900);
    --text-dull: var(--accent-600);
    --text-white: var(--white);
    --border-black: var(--black);
    --border: var(--accent-300);
    --border-dark: var(--accent-500);
    --ghost-color: var(--accent-200);
    --hover-prime: var(--primary-600);
    --hover-gray: var(--accent-200);
    --button-black: var(--black);
    --button-black-70: var(--black-70);
    --button-black-10: var(--black-10);
    --border-black: var(--black);
    --accent: var(--accent-200);
    --accent-dark: var(--accent-700);
    --pink: var(--primary-300);
}

:root.dark-mode .section-accent-light,
:root.dark-mode .section-always-accent,
.section-always-accent,
.section-accent {
    --bg: var(--accent-800);
    --bg-50: var(--accent-900-50);
    --bg-white: var(--accent-900);
    --bg-card: var(--accent-700);
    --text: var(--white);
    --text-semi: var(--accent-200);
    --text-dull: var(--accent-400);
    --text-white: var(--black);
    --border-black: var(--white);
    --border: var(--accent-600);
    --border-dark: var(--accent-400);
    --ghost-color: var(--accent-700);
    --hover-prime: var(--primary-500);
    --hover-gray: var(--accent-900);
    --button-black: var(--white);
    --button-black-70: var(--white-70);
    --button-black-10: var(--white-10);
    --border-black: var(--white);
    --accent: var(--accent-700);
    --accent-dark: var(--accent-200);
    --pink: var(--primary-700);
}

/* Background Fills */
.bg-white {
    background-color: var(--white);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.text-neutral-50 {
    color: var(--neutral-50);
}

.text-neutral-100 {
    color: var(--neutral-100);
}

.text-neutral-200 {
    color: var(--neutral-200);
}

.text-neutral-300 {
    color: var(--neutral-300);
}

.text-neutral-400 {
    color: var(--neutral-400);
}

.text-neutral-500 {
    color: var(--neutral-500);
}

.text-neutral-600 {
    color: var(--neutral-600);
}

.text-neutral-700 {
    color: var(--neutral-700);
}

.text-neutral-800 {
    color: var(--neutral-800);
}

.text-neutral-900 {
    color: var(--neutral-900);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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