@charset "UTF-8";

:root {
    --color-pixel-brightest-gray: rgb(250, 250, 250);
    --color-pixel-bright-gray:    rgb(204, 204, 204);
    --color-pixel-light-gray:     rgb(166, 166, 166);
    --color-pixel-gray:           rgb(117, 117, 117);
    --color-pixel-dark-gray:      rgb( 56,  56,  56);
    --color-pixel-darkest-gray:   rgb( 47,  47,  47);

    --color-pixel-background: rgb(158, 119, 56);

    --color-pixel-error: rgb(232, 18, 36);

    --color-pixel-secondary: rgb(43, 43, 43);
}

:root {
    --color-background: var(--color-pixel-background);

    --color-header-shadow: rgb(0, 0, 0, 0.25);

    --color-footer-shadow: rgb(0, 0, 0, 0.25);

    --color-card-shadow:       rgb(0, 0, 0, 0.4);
    --color-card-shadow-hover: rgb(0, 0, 0, 0.5);

    --color-card-background: var(--color-pixel-secondary);

    --color-title:    var(--color-pixel-brightest-gray);
    --color-subtitle: rgb(from var(--color-pixel-brightest-gray) r g b / 98%);
    --color-text:     rgb(from var(--color-pixel-brightest-gray) r g b / 94%);
    --color-icon:     var(--color-text);

    --color-link:       var(--color-pixel-brightest-gray);
    --color-link-hover: var(--color-pixel-accent);
}