@charset "utf-8";

/* Color Definitions */
:root
{
    --black: #000000; /* UNUSED */
    --psd-darkest-gray: #212223; /* html bg, bottom dark section */
    --screen-black: #312f28; /* submit button text, navbar text, black section bg, yellow/gray section text, nav text, idea text, game card border, game card text, developer/credits button text, */
    --psd-mid-gray: #64676c;
    --mid-gray: #7e7b75;
    --psd-dark-gray: #7a8085; /* header/nav bg */
    --screen-white: #b1afa8; /* credits button bg, specs h3 text */
    --psd-lightest-gray: #efefef; /* buy page bg  */
    --psd-light-gray: #e8e4da; /* no-spoilers bg, game card bg, idea cloud bg */
    --white: #ffffff; /* html text, purple/dark section text, buy button text, button text, form border */

    --brand-yellow: #ffc833; /* black section text, yellow section bg, spec icon, form label, submit bg, */
    --device-yellow: #fbc651; /* UNUSED */
    --red: #ef5023; /* Global messages with error class */
    --muted-red: #e88984; /* UNUSED */
    --purple: #6c00ff; /* purple section bg, buy button bg, help button bg form input, global messages */
    --muted-purple: #9d70db; /* UNUSED */
    --blue: #306fb6; /* UNUSED */
    --muted-blue: #5e99d0; /* UNUSED */
    --green: #2c7d46; /* UNUSED */
    --muted-green: #60be83; /* UNUSED */
}

/* P3 variants */
@supports (color: color(display-p3 1 1 1 / 1))
{
    :root
    {
        --black: color(display-p3 0 0 0);
        --screen-black: color(display-p3 0.192 0.184 0.157);
        --screen-white: color(display-p3 0.694 0.686 0.659);
        --white: color(display-p3 1 1 1);
        --mid-gray: color(display-p3 0.492 0.480 0.457);

        --psd-darkest-gray: color(display-p3 0.129 0.133 0.137);
        --psd-mid-gray: color(display-p3 0.392 0.404 0.424);
        --psd-dark-gray: color(display-p3 0.478 0.502 0.522);
        --psd-light-gray: color(display-p3 0.91 0.894 0.855);
        --psd-lightest-gray: color(display-p3 0.937 0.937 0.937);

        --brand-yellow: color(display-p3 1 0.784 0.2);
        --device-yellow: color(display-p3 0.984 0.776 0.318);
        --red: color(display-p3 0.937 0.314 0.137);
        --muted-red: color(display-p3 0.91 0.537 0.518);
        --purple: color(display-p3 0.424 0 1 / 1);
        --muted-purple: color(display-p3 0.616 0.439 0.859);
        --blue: color(display-p3 0.188 0.435 0.714);
        --muted-blue: color(display-p3 0.369 0.6 0.816);
        --green: color(display-p3 0.173 0.49 0.275);
        --muted-green: color(display-p3 0.376 0.745 0.514);
    }
}

/* Setting Theme Colors */

:root
{
    --page-bg: var(--psd-lightest-gray);
    --card-bg: var(--white);
    --text: var(--screen-black);
    --subtle: var(--psd-dark-gray);
    --mid: var(--mid-gray);
    --disabled: var(--psd-light-gray);
    --interactive: var(--muted-purple);
    --link: var(--bright);
    --accent: var(--brand-yellow);
    --bright: var(--purple);
    --negative: var(--red);
    --input-bg: var(--page-bg);
    --input-text: var(--text);
    --button-bg: var(--text);
    --button-text: var(--page-bg);
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --page-bg: var(--black);
        --card-bg: var(--psd-darkest-gray);
        --text: var(--white);
        --subtle: var(--psd-light-gray);
        --disabled: var(--psd-dark-gray);
        --interactive: var(--muted-purple);
        --link: var(--bright);
        --accent: var(--purple);
        --bright: var(--brand-yellow);
        --negative: var(--red);
    }
}
}