:root {

    --c-bg-card           : #fff;
    --c-bg-button         : #fff;
    --c-bg-input          : #fff;
    --c-bg-toolbar        : hsl(32, 48%, 98%);
    --c-bg-body           : hsl(32, 32%, 94%);
    --c-text-invert       : hsl(32, 32%, 94%);
    --c-border-content    : hsl(32, 12%, 80%, 0.4);
    --c-border-button     : hsl(32, 12%, 80%);
    --c-border-input      : hsl(32, 12%, 80%);
    --c-border-card       : transparent;
    --c-text-light        : hsl(32, 10%, 47%);
    --c-text              : hsl(32, 2%, 20%);
    --c-link              : hsl(32, 2%, 20%);
    --c-bg-invert         : hsl(32, 2%, 20%);
    --c-shadow            : hsla(32, 80%, 20%, 0.05);
    
    --c-bg-accent         : hsl(32, 80%, 94%);
    --c-border-accent     : hsl(24, 80%, 80%);
    --c-accent            : hsl(24, 76%, 40%);
    --c-link-hover        : hsl(24, 76%, 40%);
    --c-outline           : hsla(24, 90%, 68%, 0.3);
    --c-overlay           : hsla(32, 12%, 80%, 0.8);
    
    --c-primary           : hsl(170, 60%, 40%);
    --c-alt               : hsl(200, 80%, 45%);
    --c-online            : hsl(170, 60%, 40%);
    --c-danger            : hsl(12, 80%, 50%);
    --c-success           : hsl(170, 60%, 40%);

    --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: 4px;
    --radius-button: 4px;
    --radius-card: 8px;

    /* g5 */
    --c-bg-header         : hsl(36, 92%, 78%);
    --c-bg-header-hover   : hsla(36, 100%, 85%, 0.5);
    --c-bg-nav            : hsl(36, 100%, 85%);
    --c-border-header     : hsl(32, 48%, 72%);
    --c-text-header       : hsl(24, 2%, 10%);
    --c-text-sitename     : var(--c-accent);
    --c-text-nav          : hsl(24, 2%, 10%);
    --c-text-nav-selected : hsl(1, 46%, 52%);

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

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

}


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

        --c-bg-card        : hsl(28, 4%, 20%);
        --c-bg-button      : hsl(28, 4%, 20%);
        --c-bg-input       : hsl(28, 4%, 14%);
        --c-bg-toolbar     : hsl(28, 4%, 18%);
        --c-bg-body        : hsl(28, 4%, 14%);
        --c-text-invert    : hsl(28, 4%, 12%);
        --c-border-content : hsl(28, 4%, 14%);
        --c-border-button  : hsl(20, 4%, 32%);
        --c-border-input   : hsl(20, 4%, 32%);
        --c-text-light     : hsl(28, 4%, 50%);
        --c-text           : hsl(28, 4%, 80%);
        --c-bg-invert      : hsl(28, 4%, 80%);
        --c-shadow         : hsla(24, 2%, 0%, 0.1);

        --c-bg-accent      : hsl(20, 24%, 26%);
        --c-border-accent  : hsl(20, 60%, 36%);
        --c-accent         : hsl(24, 70%, 50%);
        --c-link-hover     : hsl(24, 70%, 70%);
        --c-outline        : hsla(24, 70%, 50%, 0.2);
        --c-overlay        : hsla(20, 2%, 8%, 0.67);

        --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(28, 64%, 20%);
        --c-bg-header-hover   : hsla(36, 50%, 30%, 0.3);
        --c-bg-nav            : hsl(28, 64%, 16%);
        --c-border-header     : hsl(28, 64%, 32%);
        --c-text-header       : var(--c-text);
        --c-text-sitename     : var(--c-accent);
        --c-text-nav          : hsl(24, 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);


    }
}