:root {
    /* =====================================================
       Farben
       ===================================================== */

    --color-background: #f7f4ec;
    --color-surface: #ffffff;

    --color-primary: #2a3f33;
    --color-primary-soft: #5f7a69;

    --color-text: #2c2c2c;
    --color-text-muted: #666666;
    --color-text-inverse: #ffffff;

    --color-accent: #c7a868;
    --color-accent-hover: #b79755;

    --color-border: rgba(44, 44, 44, 0.16);
    --color-border-strong: rgba(44, 44, 44, 0.28);

    --color-error: #a12622;
    --color-success: #2f6b3c;
    --color-warning: #8a6417;

    /* =====================================================
       Typografie
       ===================================================== */

    --font-family-base: Georgia, "Times New Roman", serif;
    --font-family-heading: Georgia, "Times New Roman", serif;

    --font-size-base: 1rem;
    --font-size-small: 0.875rem;
    --font-size-large: 1.125rem;

    --line-height-base: 1.6;
    --line-height-heading: 1.25;

    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* =====================================================
       Inhaltsbreiten
       ===================================================== */

    --content-width: 1200px;
    --content-width-narrow: 800px;
    --content-width-text: 720px;

    /* =====================================================
       Seitenabstände
       ===================================================== */

    --page-padding-desktop: 32px;
    --page-padding-tablet: 24px;
    --page-padding-mobile: 20px;

    /* =====================================================
       Abstandssystem
       ===================================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;
    --space-9: 96px;

    /* =====================================================
       Gestaltung
       ===================================================== */

    --radius-small: 4px;
    --radius-medium: 8px;
    --radius-large: 16px;
    --radius-pill: 999px;

    --shadow-small: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* =====================================================
       Formulare
       ===================================================== */

    --field-height: 48px;
    --field-padding-inline: 16px;
    --field-padding-block: 12px;

    /* =====================================================
       Animationen
       ===================================================== */

    --transition-fast: 150ms ease;
    --transition-standard: 250ms ease;

    /* =====================================================
       Ebenen
       ===================================================== */

    --z-header: 100;
    --z-dropdown: 200;
    --z-modal: 1000;
}