:root {
    --color-surface-background: 255, 255, 255;
    --color-surface-white: 255, 255, 255;
    --color-surface-grey: 245, 245, 245;
    --color-surface-dark: 30, 30, 30;

    --color-semantic-danger: 220, 38, 57;
    --color-semantic-success: 34, 197, 121;
    --color-semantic-info: 59, 130, 246;
    --color-semantic-warning: 245, 158, 11;

    --color-neutral-white: 255, 255, 255;
    --color-neutral-grey: 160, 160, 170;
    --color-neutral-dark: 15, 15, 20;

    --color-primary: 224, 120, 40;
    --color-primary-hover: 240, 140, 60;
    --color-primary-dark: 200, 100, 30;

    --font-family-base: 'Roboto', sans-serif;
    --font-family-display: 'DM Serif Display', serif;
    --font-size-base: 14px;

    --header-height: 64px;
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    color: rgb(var(--color-neutral-dark));
    background-color: rgb(var(--color-surface-background));
    margin: 0;
}