:root {

    /* typography */
    --font-size-main: 18px;
    --font-size-small: 14px;
    --font-weight-main: 400;
    --line-height-main: 1.5rem;
    --font-family-main: "Lato", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    --font-h1: bold calc(1.33 * 1.33 * 1.33 * var(--font-size-main))/112% var(--font-family-main);
    --font-h2: bold calc(1.33 * 1.33 * var(--font-size-main))/120% var(--font-family-main);
    --font-h3: bold calc(1.33 * var(--font-size-main))/133% var(--font-family-main);

    /*  body */
    --c-body-bg: #FEFAF6;
    --c-selection-bg: hsl(25, 67%, 90%);
    --c-accent-bg: hsl(25, 67%, 72%);
    --c-accent: hsl(25, 67%, 40%);
    
    /* text */
    --c-text: hsl(32, 2%, 20%);
    --c-text-light: hsl(32, 4%, 47%);
    --c-text-invert: hsl(32, 2%, 90%);
    --c-text-danger: hsl(12, 60%, 50%);
    --c-text-success: hsl(160, 50%, 35%);
    --c-link: var(--c-text);
    --c-link-hover: hsl(24, 67%, 40%);
    --c-link-underline: hsla(24, 67%, 40%, 0.6);
    --c-link-underline-hover: hsl(24, 67%, 40%);

    /* decorations */
    --c-hr: hsla(210, 2%, 70%, 0.4);

    /* card */
    --c-card-bg: #fff;
    --c-dark-bg: var(--c-text);
    --c-toolbar-bg: hsl(20, 2%, 95%);
    --c-card-border: hsla(210, 2%, 75%, 0.4);

    /* button */
    --c-button-bg: #fff;
    --c-button-bg-hover: #fff;
    --c-button-border: hsl(120, 2%, 80%);
    --c-button-border-hover: hsl(24, 67%, 70%);
    --c-button-border-active: hsl(170, 42%, 60%);
    --c-button-primary-bg: hsl(170, 42%, 50%);
    --c-button-primary-bg-hover: hsl(170, 42%, 40%);

    /* table */
    --c-table-bg: #fff;
    --c-table-head-bg: hsla(210, 2%, 80%, 0.4);
    --c-table-border: var(--c-card-border);

    /* input */
    --c-input-bg: #fff;
    --c-input-border: hsl(210, 2%, 80%);
    --c-input-border-focus: hsl(25, 67%, 70%);
    --c-input-readonly-bg: var(--c-table-head-bg);

    /* shadows */
    --c-shadow: hsla(24, 2%, 24%, 0.1);
    --c-shadow-focus: hsla(24, 70%, 50%, 0.2);
    --shadow-1:
        0 1px 1px var(--c-shadow),
        0 4px 4px var(--c-shadow);
    --shadow-2:
        0 1px 1px var(--c-shadow),
        0 4px 4px var(--c-shadow),
        0 8px 8px var(--c-shadow);
    --shadow-3:
        0 1px 1px var(--c-shadow),
        0 4px 4px var(--c-shadow),
        0 8px 8px var(--c-shadow),
        0 16px 16px var(--c-shadow);
    --shadow-inset-1:
        inset 0 1px 1px var(--c-shadow),
        inset 0 2px 2px var(--c-shadow);
    --shadow-focus:
        0 0 1px var(--c-shadow-focus),
        0 0 3px var(--c-shadow-focus),
        0 0 6px var(--c-shadow-focus),
        0 0 12px var(--c-shadow-focus);

    /* misc */
    --radius-input: 4px;
    --radius-button: 4px;
    --radius-card: 4px;
    --c-overlay: hsla(216, 6%, 70%, 0.8);
    --c-progress: hsl(170, 42%, 40%);
}