:root {
    --card: #f5f5f4;
    --ring: #6366f1;
    --input: #d6d3d1;
    --muted: #e7e5e4;
    --accent: #f3e5f5;
    --border: #d6d3d1;
    --radius: 1.25rem;
    --chart-1: #6366f1;
    --chart-2: #4f46e5;
    --chart-3: #4338ca;
    --chart-4: #3730a3;
    --chart-5: #312e81;
    --popover: #f5f5f4;
    --primary: #6366f1;
    --sidebar: #d6d3d1;
    --font-mono: Roboto Mono, monospace;
    --font-sans: Plus Jakarta Sans, sans-serif;
    --secondary: #d6d3d1;
    --background: #e7e5e4;
    --font-serif: Lora, serif;
    --foreground: #1e293b;
    --destructive: #ef4444;
    --shadow-blur: 10px;
    --shadow-color: hsl(240 4% 60%);
    --sidebar-ring: #6366f1;
    --shadow-spread: 4px;
    --shadow-opacity: 0.18;
    --sidebar-accent: #f3e5f5;
    --sidebar-border: #d6d3d1;
    --card-foreground: #1e293b;
    --shadow-offset-x: 2px;
    --shadow-offset-y: 2px;
    --sidebar-primary: #6366f1;
    --muted-foreground: #6b7280;
    --accent-foreground: #374151;
    --popover-foreground: #1e293b;
    --primary-foreground: #ffffff;
    --sidebar-foreground: #1e293b;
    --secondary-foreground: #4b5563;
    --destructive-foreground: #ffffff;
    --sidebar-accent-foreground: #374151;
    --sidebar-primary-foreground: #ffffff;
}

.dark {
    --card: #2c2825;
    --ring: #818cf8;
    --input: #3a3633;
    --muted: #2c2825;
    --accent: #484441;
    --border: #3a3633;
    --radius: 1.25rem;
    --chart-1: #818cf8;
    --chart-2: #6366f1;
    --chart-3: #4f46e5;
    --chart-4: #4338ca;
    --chart-5: #3730a3;
    --popover: #2c2825;
    --primary: #818cf8;
    --sidebar: #3a3633;
    --secondary: #3a3633;
    --background: #1e1b18;
    --foreground: #e2e8f0;
    --destructive: #ef4444;
    --shadow-color: hsl(0 0% 0%);
    --sidebar-ring: #818cf8;
    --sidebar-accent: #484441;
    --sidebar-border: #3a3633;
    --card-foreground: #e2e8f0;
    --sidebar-primary: #818cf8;
    --muted-foreground: #9ca3af;
    --accent-foreground: #d1d5db;
    --popover-foreground: #e2e8f0;
    --primary-foreground: #1e1b18;
    --sidebar-foreground: #e2e8f0;
    --secondary-foreground: #d1d5db;
    --destructive-foreground: #1e1b18;
    --sidebar-accent-foreground: #d1d5db;
    --sidebar-primary-foreground: #1e1b18;
}

/* Utility Classes based on Theme */
.theme-card {
    background-color: var(--card);
    color: var(--card-foreground);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-offset-x) var(--shadow-offset-y) var(--shadow-blur) var(--shadow-spread) var(--shadow-color);
}

.theme-btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
    border-radius: var(--radius);
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-weight: 600;
    transition: filter 0.2s;
}

.theme-btn-primary:hover {
    filter: brightness(1.1);
}

.theme-input {
    background-color: var(--input);
    color: var(--foreground);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 12px;
}

.theme-header {
    font-family: var(--font-serif);
    color: var(--foreground);
}