:root {
    --qui-color-main: #c4151c;
    --qui-color-main__hover: #a50618;
    --qui-color-primary: var(--qui-color-main);

    --font-size-sm: 12px;
    --font-size: 14px; /* default */
    --font-size-lg: 16px;

    /* spacing for margin, padding, etc */
    --spacing-xs: 0.875rem;
    --spacing-sm: 1rem;
    --spacing: 1.25rem; /* default */
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;

    /* text */
    --text-muted: #9ba3ad;

    /* background */
    --bg-primary: #ddd;
    --bg-secondary: #f5f5f5;

    /* border */
    --qui-border-width: 1px;
    --qui-border-type: solid;
    --qui-border-color: #d0d0cf;
    --qui-border: var(--qui-border-width) var(--qui-border-type) var(--qui-border-color);
}