/* colors */
:root {
    --red-100: oklch(0.89 0.06 22);
    --red-250: oklch(0.83 0.1 22);
    --red-400: oklch(0.78 0.12 22);
    --red-500: oklch(0.63 0.12 22);
    --red-750: oklch(0.55 0.12 22);
    --red-900: oklch(0.44 0.1 22);

    --yellow-100: oklch(0.89 0.06 80);
    --yellow-250: oklch(0.82 0.1 80);
    --yellow-400: oklch(0.77 0.12 80);
    --yellow-500: oklch(0.62 0.12 80);
    --yellow-750: oklch(0.55 0.12 80);
    --yellow-900: oklch(0.44 0.1 80);

    --green-100: oklch(0.88 0.06 142);
    --green-250: oklch(0.81 0.1 142);
    --green-400: oklch(0.75 0.12 142);
    --green-500: oklch(0.6 0.12 142);
    --green-750: oklch(0.53 0.12 142);
    --green-900: oklch(0.42 0.1 142);

    --cyan-100: oklch(0.88 0.06 188);
    --cyan-250: oklch(0.81 0.06 188);
    --cyan-400: oklch(0.78 0.08 188);
    --cyan-500: oklch(0.63 0.08 188);
    --cyan-750: oklch(0.52 0.1 188);
    --cyan-900: oklch(0.42 0.1 188);

    --blue-100: oklch(0.88 0.06 220);
    --blue-250: oklch(0.81 0.1 220);
    --blue-400: oklch(0.75 0.12 220);
    --blue-500: oklch(0.6 0.12 220);
    --blue-750: oklch(0.53 0.12 220);
    --blue-900: oklch(0.42 0.1 220);

    --purple-100: oklch(0.89 0.06 280);
    --purple-250: oklch(0.83 0.1 280);
    --purple-400: oklch(0.77 0.12 280);
    --purple-500: oklch(0.62 0.12 280);
    --purple-750: oklch(0.55 0.12 280);
    --purple-900: oklch(0.44 0.1 280);

    --pink-100: oklch(0.89 0.06 340);
    --pink-250: oklch(0.83 0.1 340);
    --pink-400: oklch(0.78 0.12 340);
    --pink-500: oklch(0.63 0.12 340);
    --pink-750: oklch(0.56 0.12 340);
    --pink-900: oklch(0.44 0.1 340);


    /* dark */
    --dark-page-main: oklch(0.26 0.024 280);
    --dark-page-alt: oklch(0.38 0.06 280);
    --dark-bg: oklch(0.2 0.018 280);

    --dark-font-main: oklch(0.98 0.024 280);
    --dark-font-alt: oklch(0.74 0.032 280);
    --dark-font-em: var(--purple-100);


    /* light */
    --light-page-main: oklch(.98 0.012 280);
    --light-page-alt: oklch(0.80 0.08 280);
    --light-bg: oklch(0.94 0.024 280);

    --light-font-main: oklch(0.16 0.008 280);
    --light-font-alt: oklch(0.32 0.1 280);
    --light-font-em: var(--purple-900);


    /* theme vars */

    --page-main: light-dark(var(--light-page-main), var(--dark-page-main));
    --page-alt: light-dark(var(--light-page-alt), var(--dark-page-alt));
    --bg: light-dark(var(--light-bg), var(--dark-bg));

    --font-main: light-dark(var(--light-font-main), var(--dark-font-main));
    --font-alt: light-dark(var(--light-font-alt), var(--dark-font-alt));
    --font-em: light-dark(var(--light-font-em), var(--dark-font-em));

    --link: light-dark(var(--red-900), var(--red-100));
    --highlight: light-dark(var(--yellow-400), var(--yellow-250));

    --logo: light-dark(var(--red-100), var(--red-750));
    --logo-neg: light-dark(var(--red-750), var(--red-100));
}