:root {

    --c-bg-card           : #fff;
    --c-bg-button         : #fff;
    --c-bg-input          : #fff;
    --c-bg-toolbar        : hsl(170, 6%, 97%);
    --c-bg-body           : hsl(170, 6%, 95%);
    --c-text-invert       : hsl(170, 6%, 95%);
    --c-border-button     : hsl(40, 75%, 50%);
    --c-border-input      : hsl(40, 75%, 70%);
    --c-border-card       : transparent;
    --c-text-light        : hsl(40, 20%, 45%);
    --c-text              : hsl(40, 25%, 20%);
    --c-link              : hsl(35, 85%, 35%);
    --c-bg-invert         : hsl(40, 2%, 20%);
    --c-border-content    : hsla(40, 12%, 70%, 0.24);
    --c-shadow            : hsla(160, 20%, 10%, 0.05);
    
    --c-bg-accent         : hsl(35, 80%, 90%);
    --c-bg-alt            : hsl(200, 80%, 88%);
    --c-border-accent     : hsl(35, 90%, 68%);
    --c-accent            : hsl(35, 80%, 40%);
    --c-link-hover        : hsl(35, 80%, 40%);
    --c-outline           : hsla(40, 90%, 68%, 0.3);
    --c-overlay           : hsla(40, 6%, 80%, 0.8);
    
    --c-primary           : hsl(40, 85%, 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%);

    --c-bg-header         : hsl(170, 6%, 92%);
    --c-bg-header-hover   : hsla(0, 0%, 100%, 0.7);
    --c-bg-nav            : hsla(40, 100%, 60%, 0.7);
    --c-border-header     : hsl(40, 80%, 44%);
    --c-text-header       : hsl(40, 2%, 10%);
    --c-text-sitename     : var(--c-accent);
    --c-text-nav          : hsl(40, 2%, 10%);
    --c-text-nav-selected : hsl(40, 80%, 34%);

    --header-bg           : var(--c-bg-header) url('/static/skins/images/camomile-head.webp') repeat left top;
    --header-bg-size      : 800px 100px;
    --header-logo         : url(/static/images/logo-dark.svg);
    --header-sitename     : url(/static/images/sitename-dark.svg);
    --header-group-bg     : hsla(40, 50%, 98%, 0.7);
    --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),
        0 4px 8px 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),
        0 8px 16px 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),
        0 24px 48px var(--c-shadow);
    --shadow-inset-1:
        inset 0 1px 1px var(--c-shadow),
        inset 0 2px 2px var(--c-shadow);

    --radius-input: 8px;
    --radius-button: 12px;
    --radius-card: 16px;


}