:root {
    /* Farben */
    --color-dark: #222;
    --color-background: #e9e9e9;
    --color-surface: #fff;
    --color-success: #22a06b;
    --color-danger: #d64545;

    /* Oberflächen */
    --color-border: rgba(127, 127, 127, 0.2);
    --color-border-soft: rgba(127, 127, 127, 0.16);
    --color-surface-muted: rgba(127, 127, 127, 0.1);
    --color-surface-hover: rgba(127, 127, 127, 0.08);

    /* Radien */
    --radius-small: 0.375rem;
    --radius-medium: 0.5rem;
    --radius-large: 0.75rem;

    /* Schatten */
    --shadow-surface: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08);

    /* Animationen */
    --transition-fast: 150ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scrollbar-gutter: stable both-edges;
    background: var(--color-dark);
}