:root {

    --c-bg-card          : #fff;
    --c-bg-button        : #fff;
    --c-bg-input         : #fff;
    --c-bg-toolbar       : hsl(210, 50%, 98%);
    --c-bg-body          : hsl(210, 40%, 95%);
    --c-text-invert      : hsl(210, 30%, 95%);
    --c-border-content   : hsla(210, 24%, 80%, 0.4);
    --c-border-button    : hsl(210, 24%, 80%);
    --c-border-input     : hsl(210, 24%, 80%);
    --c-border-card      : transparent;
    --c-text-light       : hsl(210, 24%, 48%);
    --c-text             : hsl(210, 24%, 12%);
    --c-link             : hsl(210, 80%, 48%);
    --c-bg-invert        : hsl(210, 4%, 12%);
    --c-shadow           : hsla(210, 40%, 24%, 0.05);

    --c-bg-accent        : hsl(270, 64%, 92%);
    --c-bg-alt         : hsl(200, 80%, 88%);
    --c-border-accent    : hsl(270, 50%, 68%);
    --c-accent           : hsl(270, 40%, 44%);
    --c-link-hover       : hsl(270, 50%, 50%);
    --c-outline          : hsla(240, 50%, 68%, 0.3);
    --c-overlay          : hsla(240, 8%, 80%, 0.8);

    --c-primary          : hsl(170, 60%, 40%);
    --c-alt              : hsl(200, 80%, 45%);
    --c-online           : hsl(170, 50%, 50%);
    --c-danger           : hsl(3, 70%, 52%);
    --c-success          : hsl(180, 70%, 33%);

    --c-bg-header        : hsl(210, 80%, 50%);
    --c-bg-header-hover  : rgba(0, 0, 0, 0.2);
    --c-bg-nav           : hsla(200, 0%, 100%, 0.86);
    --c-border-header    : hsl(210, 50%, 40%);
    --c-text-header      : var(--c-text-invert);
    --c-text-sitename    : hsl(210, 80%, 70%);
    --c-text-nav         : var(--c-text);
    --c-text-nav-selected: hsl(210, 80%, 50%);

    --header-bg          : var(--c-bg-header) url('/static/skins/images/blue.webp') no-repeat center center;
    --header-bg-size     : cover;
    --header-logo        : url(/static/images/logo-white.svg);
    --header-sitename    : url(/static/images/sitename-white.svg);
    --header-group-bg    : transparent;
    --header-shadow      : var(--shadow-1);

    --c-bg-toast         : var(--c-text);
    --c-text-toast       : var(--c-bg-body);

    --bg-body            : var(--c-bg-body);
    --bg-card            : var(--c-bg-card);

    --shadow-1:
        0 1px 1px var(--c-shadow),
        0 2px 4px var(--c-shadow);
    --shadow-2:
        0 1px 1px var(--c-shadow),
        0 2px 2px var(--c-shadow),
        0 3px 4px var(--c-shadow),
        0 4px 8px var(--c-shadow);
    --shadow-3:
        0 1px 1px var(--c-shadow),
        0 1px 2px var(--c-shadow),
        0 2px 4px var(--c-shadow),
        0 4px 8px var(--c-shadow),
        0 8px 16px var(--c-shadow),
        0 12px 24px var(--c-shadow);
    --shadow-inset-1:
        inset 0 1px 1px var(--c-shadow),
        inset 0 2px 2px var(--c-shadow);

    --radius-input: 3px;
    --radius-button: 3px;
    --radius-card: 7px;

}


@media (prefers-color-scheme: dark) {
    :root {

        --c-bg-card      : hsl(220, 16%, 20%);
        --c-bg-button    : hsl(220, 16%, 20%);
        --c-bg-input     : hsl(220, 16%, 14%);
        --c-bg-toolbar   : hsl(220, 16%, 18%);
        --c-bg-body      : hsl(220, 16%, 14%);
        --c-text-invert  : hsl(220, 16%, 12%);
        --c-border-button: hsl(210, 12%, 40%);
        --c-border-input : hsl(210, 12%, 40%);
        --c-text-light   : hsl(220, 16%, 50%);
        --c-text         : hsl(220, 16%, 80%);
        --c-bg-invert    : hsl(220, 16%, 80%);
        --c-border-content  : hsla(210, 1%, 40%, 0.4);
        --c-shadow       : hsla(200, 2%, 0%, 0.1);

        --c-bg-accent      : hsl(210, 24%, 26%);
        --c-bg-alt         : hsl(200, 64%, 32%);
        --c-border-accent  : hsl(210, 60%, 36%);
        --c-accent         : hsl(210, 75%, 60%);
        --c-link-hover     : hsl(210, 70%, 90%);
        --c-outline        : hsla(240, 70%, 80%, 0.14);
        --c-overlay        : hsla(210, 2%, 8%, 0.8);

        --c-primary: hsl(170, 50%, 32%);
        --c-alt    : hsl(270, 55%, 40%);
        --c-danger : hsl(12, 60%, 50%);
        --c-success: hsl(160, 60%, 40%);
        --c-unread : hsl(210, 60%, 45%);
        --c-link   : var(--c-text);

        /* g5 */
        --c-bg-header         : hsl(218, 64%, 20%);
        --c-bg-header-hover   : hsla(200, 50%, 30%, 0.3);
        --c-bg-nav            : hsl(218, 64%, 16%);
        --c-border-header     : hsl(218, 64%, 32%);
        --c-text-header       : var(--c-text);
        --c-text-sitename     : var(--c-accent);
        --c-text-nav          : hsl(210, 70%, 70%);
        --c-text-nav-selected : hsl(1, 46%, 52%);

        --header-bg           : var(--c-bg-header);
        --header-bg-size      : cover;
        --header-logo         : url(/static/images/logo-white.svg);
        --header-sitename     : url(/static/images/sitename-white.svg);
        --header-group-bg     : transparent;
        --header-shadow       : var(--shadow-1);

        --c-bg-toast          : var(--c-text);
        --c-text-toast        : var(--c-bg-body);


    }
}