:root {

    --c-bg-card          : #fff;
    --c-bg-button        : #fff;
    --c-bg-input         : #fff;
    --c-bg-toolbar       : hsl(200, 2%, 92%);
    --c-bg-body          : hsl(200, 12%, 97%);
    --c-text-invert      : hsl(200, 12%, 97%);
    --c-border-content   : hsla(200, 2%, 80%, 0.4);
    --c-border-button    : hsl(200, 2%, 80%);
    --c-border-input     : hsl(200, 2%, 80%);
    --c-border-card      : transparent;
    --c-text-light       : hsl(200, 2%, 44%);
    --c-text             : hsl(200, 2%, 8%);
    --c-link             : hsl(200, 2%, 8%);
    --c-bg-invert        : hsl(200, 2%, 8%);
    --c-shadow           : hsla(240, 40%, 24%, 0.05);

    --c-bg-accent        : hsl(200, 2%, 86%);
    --c-bg-alt           : hsl(200, 80%, 88%);
    --c-border-accent    : hsl(200, 2%, 60%);
    --c-accent           : hsl(200, 2%, 40%);
    --c-link-hover       : hsl(200, 2%, 50%);
    --c-outline          : hsla(200, 2%, 60%, 0.3);
    --c-overlay          : hsla(200, 2%, 80%, 0.8);;

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

    --c-bg-header        : #fff;
    --c-bg-header-hover  : rgba(0, 0, 0, 0.04);
    --c-bg-nav           : hsl(200, 2%, 8%);
    --c-border-header    : hsl(200, 2%, 52%);
    --c-text-header      : hsl(200, 2%, 8%);
    --c-text-sitename    : var(--c-text-light);
    --c-text-nav         : var(--c-bg-header);
    --c-text-nav-selected: hsl(200, 2%, 64%);

    --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-shadow      : var(--shadow-1);
    --header-group-bg    : transparent;

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

}