/* Design System CSS Variables */
:root {
    --background: oklch(0.9885 0.0057 84.5659);
    --foreground: oklch(0.3660 0.0251 49.6085);
    --card: oklch(0.9686 0.0091 78.2818);
    --card-foreground: oklch(0.3660 0.0251 49.6085);
    --popover: oklch(0.9686 0.0091 78.2818);
    --popover-foreground: oklch(0.3660 0.0251 49.6085);
    --primary: oklch(0.5553 0.1455 48.9975);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.8276 0.0752 74.4400);
    --secondary-foreground: oklch(0.4444 0.0096 73.6390);
    --muted: oklch(0.9363 0.0218 83.2637);
    --muted-foreground: oklch(0.5534 0.0116 58.0708);
    --accent: oklch(0.9000 0.0500 74.9889);
    --accent-foreground: oklch(0.4444 0.0096 73.6390);
    --destructive: oklch(0.4437 0.1613 26.8994);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: oklch(0.8866 0.0404 89.6994);
    --input: oklch(0.8866 0.0404 89.6994);
    --ring: oklch(0.5553 0.1455 48.9975);
    --chart-1: oklch(0.5553 0.1455 48.9975);
    --chart-2: oklch(0.5534 0.0116 58.0708);
    --chart-3: oklch(0.5538 0.1207 66.4416);
    --chart-4: oklch(0.5534 0.0116 58.0708);
    --chart-5: oklch(0.6806 0.1423 75.8340);
    --sidebar: oklch(0.9363 0.0218 83.2637);
    --sidebar-foreground: oklch(0.3660 0.0251 49.6085);
    --sidebar-primary: oklch(0.5553 0.1455 48.9975);
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: oklch(0.5538 0.1207 66.4416);
    --sidebar-accent-foreground: oklch(1.0000 0 0);
    --sidebar-border: oklch(0.8866 0.0404 89.6994);
    --sidebar-ring: oklch(0.5553 0.1455 48.9975);
    --font-sans: Oxanium, sans-serif;
    --font-serif: Merriweather, serif;
    --font-mono: Fira Code, monospace;
    --radius: 0.3rem;
    --shadow-2xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);
    --shadow-xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);
    --shadow-sm: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18);
    --shadow: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18);
    --shadow-md: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 2px 4px -1px hsl(28 18% 25% / 0.18);
    --shadow-lg: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 4px 6px -1px hsl(28 18% 25% / 0.18);
    --shadow-xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 8px 10px -1px hsl(28 18% 25% / 0.18);
    --shadow-2xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.45);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
}

.dark {
    --background: oklch(0.2161 0.0061 56.0434);
    --foreground: oklch(0.9699 0.0013 106.4238);
    --card: oklch(0.2685 0.0063 34.2976);
    --card-foreground: oklch(0.9699 0.0013 106.4238);
    --popover: oklch(0.2685 0.0063 34.2976);
    --popover-foreground: oklch(0.9699 0.0013 106.4238);
    --primary: oklch(0.7049 0.1867 47.6044);
    --primary-foreground: oklch(1.0000 0 0);
    --secondary: oklch(0.4444 0.0096 73.6390);
    --secondary-foreground: oklch(0.9232 0.0026 48.7171);
    --muted: oklch(0.2685 0.0063 34.2976);
    --muted-foreground: oklch(0.7161 0.0091 56.2590);
    --accent: oklch(0.3598 0.0497 229.3202);
    --accent-foreground: oklch(0.9232 0.0026 48.7171);
    --destructive: oklch(0.5771 0.2152 27.3250);
    --destructive-foreground: oklch(1.0000 0 0);
    --border: oklch(0.3741 0.0087 67.5582);
    --input: oklch(0.3741 0.0087 67.5582);
    --ring: oklch(0.7049 0.1867 47.6044);
    --chart-1: oklch(0.7049 0.1867 47.6044);
    --chart-2: oklch(0.6847 0.1479 237.3225);
    --chart-3: oklch(0.7952 0.1617 86.0468);
    --chart-4: oklch(0.7161 0.0091 56.2590);
    --chart-5: oklch(0.5534 0.0116 58.0708);
    --sidebar: oklch(0.2685 0.0063 34.2976);
    --sidebar-foreground: oklch(0.9699 0.0013 106.4238);
    --sidebar-primary: oklch(0.7049 0.1867 47.6044);
    --sidebar-primary-foreground: oklch(1.0000 0 0);
    --sidebar-accent: oklch(0.6847 0.1479 237.3225);
    --sidebar-accent-foreground: oklch(0.2839 0.0734 254.5378);
    --sidebar-border: oklch(0.3741 0.0087 67.5582);
    --sidebar-ring: oklch(0.7049 0.1867 47.6044);
    --font-sans: Oxanium, sans-serif;
    --font-serif: Merriweather, serif;
    --font-mono: Fira Code, monospace;
    --radius: 0.3rem;
    --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);
    --shadow-xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);
    --shadow-sm: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);
    --shadow: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);
    --shadow-md: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 2px 4px -1px hsl(0 0% 5% / 0.18);
    --shadow-lg: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 4px 6px -1px hsl(0 0% 5% / 0.18);
    --shadow-xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 8px 10px -1px hsl(0 0% 5% / 0.18);
    --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.45);
}