@layer base {
    :root {
        /* Primary Colors */
        --color-primary: 105 117 101; /* #697565 - Sage green */
        --color-primary-dark: 24 28 20; /* #181C14 - Dark moss */

        /* Secondary Colors */
        --color-secondary: 24 28 20; /* #181C14 - Dark moss */
        --color-secondary-gray: 60 61 55; /* #3C3D37 - Charcoal */
        --color-secondary-fuzzy: 70 91 80; /* #465B50 - Dark sage */

        /* Text Colors */
        --color-text: 236 223 204; /* #ECDFCC - Cream */
        --color-text-light: 105 117 101; /* #697565 - Sage */

        /* Navigation Colors */
        --nav-bg: 24 28 20; /* Dark moss */
        --nav-bg-transparent: 24 28 20 / 0.95; /* Dark moss with transparency */
        --nav-text: 236 223 204; /* Cream */
        --nav-text-hover: 70 91 80; /* Dark sage */
        --nav-text-active: 70 91 80; /* Dark sage */
        --nav-border: 60 61 55; /* Charcoal */
        --nav-shadow: 0 0 0 / 0.1;

        /* System Colors */
        --background: 24 28 20; /* Dark moss */
        --foreground: 236 223 204; /* Cream */

        --card: 30 34 26; /* Slightly lighter dark moss */
        --card-foreground: 236 223 204; /* Cream */

        --popover: 30 34 26; /* Slightly lighter dark moss */
        --popover-foreground: 236 223 204; /* Cream */

        --primary: 105 117 101; /* Sage */
        --primary-foreground: 236 223 204; /* Cream */

        --secondary: 60 61 55; /* Charcoal */
        --secondary-foreground: 236 223 204; /* Cream */

        --muted: 60 61 55; /* Charcoal */
        --muted-foreground: 105 117 101; /* Sage */

        --accent: 70 91 80; /* Dark sage - neuer dunkelgrüner Akzent */
        --accent-foreground: 236 223 204; /* Cream */

        --destructive: 180 60 60; /* Muted red for destructive actions */
        --destructive-foreground: 236 223 204; /* Cream */

        --border: 60 61 55; /* Charcoal */
        --input: 60 61 55; /* Charcoal */
        --ring: 70 91 80; /* Dark sage */

        --radius: 0.5rem;
    }
}