:root {
    --navbar-grey: #222222;
    --border-grey: #949494;
    --background-white: #f5f5f5;

    --bright-primary: rgb(255, 125, 255);
    --muted-primary: rgb(195, 50, 195);
    --dark-primary: rgb(35, 10, 35);
    --very-dark-primary: rgb(30, 0, 30);
    --black-shadow: rgba(0, 0, 0, 0.075);
    --primary-shadow: rgba(250, 120, 250, 0.5);

    --primary-border: var(--muted-primary);
    --primary-dark-text: var(--dark-primary);
    --primary-bright-text: var(--bright-primary);

    --bright-secondary: rgb(125, 255, 255);
    --muted-secondary: rgb(50, 195, 195);
    --dark-secondary: rgb(10, 35, 35);
    --very-dark-secondary: rgb(0, 30, 30);
    --secondary-shadow: rgba(120, 250, 250, 0.5);

    --secondary-border: var(--muted-secondary);
    --secondary-dark-text: var(--dark-secondary);
    --secondary-bright-text: var(--bright-secondary);

    --primary-11-secondary-01: color-mix(in srgb, var(--bright-primary) 91.67%, var(--bright-secondary));
    --primary-10-secondary-02: color-mix(in srgb, var(--bright-primary) 83.33%, var(--bright-secondary));
    --primary-09-secondary-03: color-mix(in srgb, var(--bright-primary) 75%, var(--bright-secondary));
    --primary-08-secondary-04: color-mix(in srgb, var(--bright-primary) 66.67%, var(--bright-secondary));
    --primary-07-secondary-05: color-mix(in srgb, var(--bright-primary) 58.33%, var(--bright-secondary));
    --primary-06-secondary-06: color-mix(in srgb, var(--bright-primary) 50%, var(--bright-secondary));
    --primary-05-secondary-07: color-mix(in srgb, var(--bright-primary) 41.67%, var(--bright-secondary));
    --primary-04-secondary-08: color-mix(in srgb, var(--bright-primary) 33.33%, var(--bright-secondary));
    --primary-03-secondary-09: color-mix(in srgb, var(--bright-primary) 25%, var(--bright-secondary));
    --primary-02-secondary-10: color-mix(in srgb, var(--bright-primary) 16.67%, var(--bright-secondary));
    --primary-01-secondary-11: color-mix(in srgb, var(--bright-primary) 8.33%, var(--bright-secondary));
}