/* src/index.css */
/* FULL FILE */
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));
@tailwind utilities;

/* Base Layers */
@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

@theme inline {
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  /* Custom UI Helpers */
  --custom-highlight-bg: hsl(var(--primary) / 0.1);
  --custom-highlight-fg: hsl(var(--primary));
  --custom-highlight-border: hsl(var(--primary) / 0.5);
  /* Custom Font */
  --custom-font-family: var(--font-sans); /* Default fallback */
  --custom-font-size: 16px; /* Default fallback */
  /* Sticky Header Heights */
  --card-header-height: 3.5rem; /* Approximate height of CardHeader */
}

:root {
  --radius: 0.625rem;
  /* Light theme based on the OKLCH palette */
  --background: oklch(0.98 0.02 100);
  --foreground: oklch(0.2 0.05 230);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.05 230);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.05 230);
  --primary: oklch(0.7 0.2 140);
  --primary-foreground: oklch(0.98 0.02 100);
  --secondary: oklch(0.5 0.2 180);
  --secondary-foreground: oklch(0.98 0.02 100);
  --muted: oklch(0.9 0.05 100);
  --muted-foreground: oklch(0.4 0.05 230);
  --accent: oklch(0.8 0.15 110);
  --accent-foreground: oklch(0.2 0.05 230);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.98 0.02 100); /* Added */
  --border: oklch(0.8 0.03 230);
  --input: oklch(0.8 0.03 230);
  --ring: oklch(0.7 0.2 140);
  --chart-1: oklch(0.5 0.2 180);
  --chart-2: oklch(0.6 0.2 160);
  --chart-3: oklch(0.7 0.2 140);
  --chart-4: oklch(0.8 0.15 110);
  --chart-5: oklch(0.9 0.1 90);
  --sidebar: oklch(0.98 0.02 100);
  --sidebar-foreground: oklch(0.2 0.05 230);
  --sidebar-primary: oklch(0.7 0.2 140);
  --sidebar-primary-foreground: oklch(0.98 0.02 100);
  --sidebar-accent: oklch(0.8 0.15 110);
  --sidebar-accent-foreground: oklch(0.2 0.05 230);
  --sidebar-border: oklch(0.8 0.03 230);
  --sidebar-ring: oklch(0.7 0.2 140);

  /* Z-Index Scale */
  --z-sticky: 10;
  --z-sidebar: 40;
  --z-dialog: 50;
  --z-popover: 70;
  --z-modal-popover: 100;
  --z-toast: 999;
}

.dark {
  /* Dark theme based on the OKLCH palette */
  --background: oklch(0.15 0.05 230);
  --foreground: oklch(0.9 0.05 90);
  --card: oklch(0.2 0.05 230);
  --card-foreground: oklch(0.9 0.05 90);
  --popover: oklch(0.2 0.05 230);
  --popover-foreground: oklch(0.9 0.05 90);
  --primary: oklch(0.7 0.2 140);
  --primary-foreground: oklch(0.15 0.05 230);
  --secondary: oklch(0.5 0.2 180);
  --secondary-foreground: oklch(0.9 0.05 90);
  --muted: oklch(0.25 0.05 230);
  --muted-foreground: oklch(0.7 0.05 90);
  --accent: oklch(0.8 0.15 110);
  --accent-foreground: oklch(0.15 0.05 230);
  --destructive: oklch(0.5 0.2 20);
  --destructive-foreground: oklch(0.9 0.05 90); /* Added */
  --border: oklch(0.3 0.05 230);
  --input: oklch(0.3 0.05 230);
  --ring: oklch(0.7 0.2 140);
  --chart-1: oklch(0.5 0.2 180);
  --chart-2: oklch(0.6 0.2 160);
  --chart-3: oklch(0.7 0.2 140);
  --chart-4: oklch(0.8 0.15 110);
  --chart-5: oklch(0.9 0.1 90);
  --sidebar: oklch(0.2 0.05 230);
  --sidebar-foreground: oklch(0.9 0.05 90);
  --sidebar-primary: oklch(0.7 0.2 140);
  --sidebar-primary-foreground: oklch(0.15 0.05 230);
  --sidebar-accent: oklch(0.8 0.15 110);
  --sidebar-accent-foreground: oklch(0.15 0.05 230);
  --sidebar-border: oklch(0.3 0.05 230);
  --sidebar-ring: oklch(0.7 0.2 140);
}

.TijuLight {
  /* Tiju Light theme based on provided color palette */
  --background: #f0ead6; /* eggshell */
  --foreground: #3b3c36; /* black-olive */
  --card: #f0ead6; /* eggshell */
  --card-foreground: #3b3c36; /* black-olive */
  --popover: #f0ead6; /* eggshell */
  --popover-foreground: #3b3c36; /* black-olive */
  --primary: #f1c40f; /* xanthous */
  --primary-foreground: #3b3c36; /* black-olive */
  --secondary: #8b8589; /* taupe-gray */
  --secondary-foreground: #f0ead6; /* eggshell */
  --muted: #e6e0cc; /* lighter eggshell */
  --muted-foreground: #696969; /* dim-gray */
  --accent: #f1c40f; /* xanthous */
  --accent-foreground: #3b3c36; /* black-olive */
  --destructive: #ff6b6b; /* soft red */
  --destructive-foreground: #f0ead6; /* eggshell */ /* Added */
  --border: #d9d3bf; /* darker eggshell */
  --input: #d9d3bf; /* darker eggshell */
  --ring: #f1c40f; /* xanthous */
  --chart-1: #f1c40f; /* xanthous */
  --chart-2: #8b8589; /* taupe-gray */
  --chart-3: #696969; /* dim-gray */
  --chart-4: #7f9860; /* sage green */
  --chart-5: #3b3c36; /* black-olive */
  --sidebar: #e6e0cc; /* lighter eggshell */
  --sidebar-foreground: #3b3c36; /* black-olive */
  --sidebar-primary: #f1c40f; /* xanthous */
  --sidebar-primary-foreground: #3b3c36; /* black-olive */
  --sidebar-accent: #f1c40f; /* xanthous */
  --sidebar-accent-foreground: #3b3c36; /* black-olive */
  --sidebar-border: #d9d3bf; /* darker eggshell */
  --sidebar-ring: #f1c40f; /* xanthous */
}

.TijuDark {
  /* Tiju Dark theme based on provided color palette */
  --background: #3b3c36; /* black-olive */
  --foreground: #f0ead6; /* eggshell */
  --card: #454540; /* slightly lighter black-olive */
  --card-foreground: #f0ead6; /* eggshell */
  --popover: #454540; /* slightly lighter black-olive */
  --popover-foreground: #f0ead6; /* eggshell */
  --primary: #f1c40f; /* xanthous */
  --primary-foreground: #3b3c36; /* black-olive */
  --secondary: #8b8589; /* taupe-gray */
  --secondary-foreground: #f0ead6; /* eggshell */
  --muted: #575750; /* muted black-olive */
  --muted-foreground: #d9d3bf; /* darker eggshell */
  --accent: #f1c40f; /* xanthous */
  --accent-foreground: #3b3c36; /* black-olive */
  --destructive: #ff6b6b; /* soft red */
  --destructive-foreground: #3b3c36; /* black-olive */ /* Added */
  --border: #696969; /* dim-gray */
  --input: #696969; /* dim-gray */
  --ring: #f1c40f; /* xanthous */
  --chart-1: #f1c40f; /* xanthous */
  --chart-2: #8b8589; /* taupe-gray */
  --chart-3: #f0ead6; /* eggshell */
  --chart-4: #d4ac0d; /* darker xanthous */
  --chart-5: #a9a9a9; /* lighter dim-gray */
  --sidebar: #454540; /* slightly lighter black-olive */
  --sidebar-foreground: #f0ead6; /* eggshell */
  --sidebar-primary: #f1c40f; /* xanthous */
  --sidebar-primary-foreground: #3b3c36; /* black-olive */
  --sidebar-accent: #f1c40f; /* xanthous */
  --sidebar-accent-foreground: #3b3c36; /* black-olive */
  --sidebar-border: #696969; /* dim-gray */
  --sidebar-ring: #f1c40f; /* xanthous */
}

.bubblegum {
  /* Bubblegum theme based on provided color palette */
  --background: oklch(0.9399 0.0203 345.6985);
  --foreground: oklch(0.4712 0 0);
  --card: oklch(0.9498 0.0500 86.8891);
  --card-foreground: oklch(0.4712 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.4712 0 0);
  --primary: oklch(0.6209 0.1801 348.1385);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.8095 0.0694 198.1863);
  --secondary-foreground: oklch(0.3211 0 0);
  --muted: oklch(0.8800 0.0504 212.0952);
  --muted-foreground: oklch(0.5795 0 0);
  --accent: oklch(0.9195 0.0801 87.6670);
  --accent-foreground: oklch(0.3211 0 0);
  --destructive: oklch(0.7091 0.1697 21.9551);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.6209 0.1801 348.1385);
  --input: oklch(0.9189 0 0);
  --ring: oklch(0.7002 0.1597 350.7532);
  --chart-1: oklch(0.7002 0.1597 350.7532);
  --chart-2: oklch(0.8189 0.0799 212.0892);
  --chart-3: oklch(0.9195 0.0801 87.6670);
  --chart-4: oklch(0.7998 0.1110 348.1791);
  --chart-5: oklch(0.6197 0.1899 353.9091);
  --sidebar: oklch(0.9140 0.0424 343.0913);
  --sidebar-foreground: oklch(0.3211 0 0);
  --sidebar-primary: oklch(0.6559 0.2118 354.3084);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.8228 0.1095 346.0184);
  --sidebar-accent-foreground: oklch(0.3211 0 0);
  --sidebar-border: oklch(0.9464 0.0327 307.1745);
  --sidebar-ring: oklch(0.6559 0.2118 354.3084);
  --font-sans: Poppins, sans-serif;
  --font-serif: Lora, serif;
  --font-mono: Fira Code, monospace;
  --radius: 0.4rem;
  --shadow-2xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
  --shadow-xs: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 0.50);
  --shadow-sm: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
  --shadow: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
  --shadow-md: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
  --shadow-lg: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
  --shadow-xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00);
  --shadow-2xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 2.50);
}

.bubblegumDark {
  /* Bubblegum Dark theme */
  --background: oklch(0.2497 0.0305 234.1628);
  --foreground: oklch(0.9306 0.0197 349.0785);
  --card: oklch(0.2902 0.0299 233.5352);
  --card-foreground: oklch(0.9306 0.0197 349.0785);
  --popover: oklch(0.2902 0.0299 233.5352);
  --popover-foreground: oklch(0.9306 0.0197 349.0785);
  --primary: oklch(0.9195 0.0801 87.6670);
  --primary-foreground: oklch(0.2497 0.0305 234.1628);
  --secondary: oklch(0.7794 0.0803 4.1330);
  --secondary-foreground: oklch(0.2497 0.0305 234.1628);
  --muted: oklch(0.2713 0.0086 255.5780);
  --muted-foreground: oklch(0.7794 0.0803 4.1330);
  --accent: oklch(0.6699 0.0988 356.9762);
  --accent-foreground: oklch(0.9306 0.0197 349.0785);
  --destructive: oklch(0.6702 0.1806 350.3599);
  --destructive-foreground: oklch(0.2497 0.0305 234.1628);
  --border: oklch(0.3907 0.0399 242.2181);
  --input: oklch(0.3093 0.0305 232.0027);
  --ring: oklch(0.6998 0.0896 201.8672);
  --chart-1: oklch(0.6998 0.0896 201.8672);
  --chart-2: oklch(0.7794 0.0803 4.1330);
  --chart-3: oklch(0.6699 0.0988 356.9762);
  --chart-4: oklch(0.4408 0.0702 217.0848);
  --chart-5: oklch(0.2713 0.0086 255.5780);
  --sidebar: oklch(0.2303 0.0270 235.9743);
  --sidebar-foreground: oklch(0.9670 0.0029 264.5419);
  --sidebar-primary: oklch(0.6559 0.2118 354.3084);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.8228 0.1095 346.0184);
  --sidebar-accent-foreground: oklch(0.2781 0.0296 256.8480);
  --sidebar-border: oklch(0.3729 0.0306 259.7328);
  --sidebar-ring: oklch(0.6559 0.2118 354.3084);
  --font-sans: Poppins, sans-serif;
  --font-serif: Lora, serif;
  --font-mono: Fira Code, monospace;
  --radius: 0.4rem;
  --shadow-2xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
  --shadow-xs: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 0.50);
  --shadow-sm: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
  --shadow: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
  --shadow-md: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
  --shadow-lg: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
  --shadow-xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00);
  --shadow-2xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 2.50);
}

.candyland {
  /* Candyland theme based on provided color palette */
  --background: oklch(0.9809 0.0025 228.7836);
  --foreground: oklch(0.3211 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.3211 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.3211 0 0);
  --primary: oklch(0.8677 0.0735 7.0855);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.8148 0.0819 225.7537);
  --secondary-foreground: oklch(0 0 0);
  --muted: oklch(0.8828 0.0285 98.1033);
  --muted-foreground: oklch(0.5382 0 0);
  --accent: oklch(0.9680 0.2110 109.7692);
  --accent-foreground: oklch(0 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.9022 0.0052 247.8822);
  --input: oklch(0.9700 0.0029 264.5420);
  --ring: oklch(0.6397 0.1720 36.4421);
  --chart-1: oklch(0.7156 0.0605 248.6845);
  --chart-2: oklch(0.7875 0.0917 35.9616);
  --chart-3: oklch(0.5778 0.0759 254.1573);
  --chart-4: oklch(0.5016 0.0849 259.4902);
  --chart-5: oklch(0.4241 0.0952 264.0306);
  --sidebar: oklch(0.9030 0.0046 258.3257);
  --sidebar-foreground: oklch(0.3211 0 0);
  --sidebar-primary: oklch(0.6397 0.1720 36.4421);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9119 0.0222 243.8174);
  --sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
  --sidebar-border: oklch(0.9276 0.0058 264.5313);
  --sidebar-ring: oklch(0.6397 0.1720 36.4421);
  --font-sans: Poppins, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Roboto Mono, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.candylandDark {
  /* Candyland Dark theme */
  --background: oklch(0.2303 0.0125 264.2926);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.3210 0.0078 223.6661);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.3210 0.0078 223.6661);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.8027 0.1355 349.2347);
  --primary-foreground: oklch(0 0 0);
  --secondary: oklch(0.7395 0.2268 142.8504);
  --secondary-foreground: oklch(0 0 0);
  --muted: oklch(0.3867 0 0);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.8148 0.0819 225.7537);
  --accent-foreground: oklch(0 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3867 0 0);
  --input: oklch(0.3867 0 0);
  --ring: oklch(0.8027 0.1355 349.2347);
  --chart-1: oklch(0.8027 0.1355 349.2347);
  --chart-2: oklch(0.7395 0.2268 142.8504);
  --chart-3: oklch(0.8148 0.0819 225.7537);
  --chart-4: oklch(0.9680 0.2110 109.7692);
  --chart-5: oklch(0.8652 0.1768 90.3816);
  --sidebar: oklch(0.2303 0.0125 264.2926);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.8027 0.1355 349.2347);
  --sidebar-primary-foreground: oklch(0 0 0);
  --sidebar-accent: oklch(0.8148 0.0819 225.7537);
  --sidebar-accent-foreground: oklch(0 0 0);
  --sidebar-border: oklch(0.3867 0 0);
  --sidebar-ring: oklch(0.8027 0.1355 349.2347);
  --font-sans: Poppins, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Roboto Mono, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.doom64 {
  /* Doom 64 theme based on provided color palette */
  --background: oklch(0.8452 0 0);
  --foreground: oklch(0.2393 0 0);
  --card: oklch(0.7572 0 0);
  --card-foreground: oklch(0.2393 0 0);
  --popover: oklch(0.7572 0 0);
  --popover-foreground: oklch(0.2393 0 0);
  --primary: oklch(0.5016 0.1887 27.4816);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.4955 0.0896 126.1858);
  --secondary-foreground: oklch(1.0000 0 0);
  --muted: oklch(0.7826 0 0);
  --muted-foreground: oklch(0.4091 0 0);
  --accent: oklch(0.5880 0.0993 245.7394);
  --accent-foreground: oklch(1.0000 0 0);
  --destructive: oklch(0.7076 0.1975 46.4558);
  --destructive-foreground: oklch(0 0 0);
  --border: oklch(0.4313 0 0);
  --input: oklch(0.4313 0 0);
  --ring: oklch(0.5016 0.1887 27.4816);
  --chart-1: oklch(0.5016 0.1887 27.4816);
  --chart-2: oklch(0.4955 0.0896 126.1858);
  --chart-3: oklch(0.5880 0.0993 245.7394);
  --chart-4: oklch(0.7076 0.1975 46.4558);
  --chart-5: oklch(0.5656 0.0431 40.4319);
  --sidebar: oklch(0.7572 0 0);
  --sidebar-foreground: oklch(0.2393 0 0);
  --sidebar-primary: oklch(0.5016 0.1887 27.4816);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.5880 0.0993 245.7394);
  --sidebar-accent-foreground: oklch(1.0000 0 0);
  --sidebar-border: oklch(0.4313 0 0);
  --sidebar-ring: oklch(0.5016 0.1887 27.4816);
  --font-sans: "Oxanium", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Source Code Pro", monospace;
  --radius: 0px;
  --shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
  --shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.20);
  --shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40);
  --shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40);
  --shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40);
  --shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40);
  --shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 1.00);
}

.doom64Dark {
  /* Doom 64 Dark theme */
  --background: oklch(0.2178 0 0);
  --foreground: oklch(0.9067 0 0);
  --card: oklch(0.2850 0 0);
  --card-foreground: oklch(0.9067 0 0);
  --popover: oklch(0.2850 0 0);
  --popover-foreground: oklch(0.9067 0 0);
  --primary: oklch(0.6083 0.2090 27.0276);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.6423 0.1467 133.0145);
  --secondary-foreground: oklch(0 0 0);
  --muted: oklch(0.2645 0 0);
  --muted-foreground: oklch(0.7058 0 0);
  --accent: oklch(0.7482 0.1235 244.7492);
  --accent-foreground: oklch(0 0 0);
  --destructive: oklch(0.7839 0.1719 68.0943);
  --destructive-foreground: oklch(0 0 0);
  --border: oklch(0.4091 0 0);
  --input: oklch(0.4091 0 0);
  --ring: oklch(0.6083 0.2090 27.0276);
  --chart-1: oklch(0.6083 0.2090 27.0276);
  --chart-2: oklch(0.6423 0.1467 133.0145);
  --chart-3: oklch(0.7482 0.1235 244.7492);
  --chart-4: oklch(0.7839 0.1719 68.0943);
  --chart-5: oklch(0.6471 0.0334 40.7963);
  --sidebar: oklch(0.1913 0 0);
  --sidebar-foreground: oklch(0.9067 0 0);
  --sidebar-primary: oklch(0.6083 0.2090 27.0276);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.7482 0.1235 244.7492);
  --sidebar-accent-foreground: oklch(0 0 0);
  --sidebar-border: oklch(0.4091 0 0);
  --sidebar-ring: oklch(0.6083 0.2090 27.0276);
  --font-sans: "Oxanium", sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Source Code Pro", monospace;
  --radius: 0px;
  --shadow-2xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
  --shadow-xs: 0px 2px 5px 0px hsl(0 0% 0% / 0.30);
  --shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
  --shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60);
  --shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60);
  --shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60);
  --shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60);
  --shadow-2xl: 0px 2px 5px 0px hsl(0 0% 0% / 1.50);
}

.luxury {
  /* Luxury theme based on provided color palette */
  --background: oklch(0.9779 0.0042 56.3756);
  --foreground: oklch(0.2178 0 0);
  --card: oklch(0.9779 0.0042 56.3756);
  --card-foreground: oklch(0.2178 0 0);
  --popover: oklch(0.9779 0.0042 56.3756);
  --popover-foreground: oklch(0.2178 0 0);
  --primary: oklch(0.4650 0.1470 24.9381);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9625 0.0385 89.0943);
  --secondary-foreground: oklch(0.4847 0.1022 75.1153);
  --muted: oklch(0.9431 0.0068 53.4442);
  --muted-foreground: oklch(0.4444 0.0096 73.6390);
  --accent: oklch(0.9619 0.0580 95.6174);
  --accent-foreground: oklch(0.3958 0.1331 25.7230);
  --destructive: oklch(0.4437 0.1613 26.8994);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.9355 0.0324 80.9937);
  --input: oklch(0.9355 0.0324 80.9937);
  --ring: oklch(0.4650 0.1470 24.9381);
  --chart-1: oklch(0.5054 0.1905 27.5181);
  --chart-2: oklch(0.4650 0.1470 24.9381);
  --chart-3: oklch(0.3958 0.1331 25.7230);
  --chart-4: oklch(0.5553 0.1455 48.9975);
  --chart-5: oklch(0.4732 0.1247 46.2007);
  --sidebar: oklch(0.9431 0.0068 53.4442);
  --sidebar-foreground: oklch(0.2178 0 0);
  --sidebar-primary: oklch(0.4650 0.1470 24.9381);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9619 0.0580 95.6174);
  --sidebar-accent-foreground: oklch(0.3958 0.1331 25.7230);
  --sidebar-border: oklch(0.9355 0.0324 80.9937);
  --sidebar-ring: oklch(0.4650 0.1470 24.9381);
  --font-sans: Poppins, sans-serif;
  --font-serif: Libre Baskerville, serif;
  --font-mono: IBM Plex Mono, monospace;
  --radius: 0.375rem;
  --shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
  --shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
  --shadow-sm: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12);
  --shadow: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12);
  --shadow-md: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12);
  --shadow-lg: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12);
  --shadow-xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12);
  --shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.30);
}

.luxuryDark {
  /* Luxury Dark theme */
  --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.5054 0.1905 27.5181);
  --primary-foreground: oklch(0.9779 0.0042 56.3756);
  --secondary: oklch(0.4732 0.1247 46.2007);
  --secondary-foreground: oklch(0.9619 0.0580 95.6174);
  --muted: oklch(0.2685 0.0063 34.2976);
  --muted-foreground: oklch(0.8687 0.0043 56.3660);
  --accent: oklch(0.5553 0.1455 48.9975);
  --accent-foreground: oklch(0.9619 0.0580 95.6174);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --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.5054 0.1905 27.5181);
  --chart-1: oklch(0.7106 0.1661 22.2162);
  --chart-2: oklch(0.6368 0.2078 25.3313);
  --chart-3: oklch(0.5771 0.2152 27.3250);
  --chart-4: oklch(0.8369 0.1644 84.4286);
  --chart-5: oklch(0.7686 0.1647 70.0804);
  --sidebar: oklch(0.2161 0.0061 56.0434);
  --sidebar-foreground: oklch(0.9699 0.0013 106.4238);
  --sidebar-primary: oklch(0.5054 0.1905 27.5181);
  --sidebar-primary-foreground: oklch(0.9779 0.0042 56.3756);
  --sidebar-accent: oklch(0.5553 0.1455 48.9975);
  --sidebar-accent-foreground: oklch(0.9619 0.0580 95.6174);
  --sidebar-border: oklch(0.3741 0.0087 67.5582);
  --sidebar-ring: oklch(0.5054 0.1905 27.5181);
  --font-sans: Poppins, sans-serif;
  --font-serif: Libre Baskerville, serif;
  --font-mono: IBM Plex Mono, monospace;
  --radius: 0.375rem;
  --shadow-2xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
  --shadow-xs: 1px 1px 16px -2px hsl(0 63% 18% / 0.06);
  --shadow-sm: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12);
  --shadow: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12);
  --shadow-md: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12);
  --shadow-lg: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12);
  --shadow-xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12);
  --shadow-2xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.30);
}

.northernLights {
  /* Northern Lights theme based on provided color palette */
  --background: oklch(0.9824 0.0013 286.3757);
  --foreground: oklch(0.3211 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.3211 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.3211 0 0);
  --primary: oklch(0.6487 0.1538 150.3071);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.6746 0.1414 261.3380);
  --secondary-foreground: oklch(1.0000 0 0);
  --muted: oklch(0.8828 0.0285 98.1033);
  --muted-foreground: oklch(0.5382 0 0);
  --accent: oklch(0.8269 0.1080 211.9627);
  --accent-foreground: oklch(0.3211 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.8699 0 0);
  --input: oklch(0.8699 0 0);
  --ring: oklch(0.6487 0.1538 150.3071);
  --chart-1: oklch(0.6487 0.1538 150.3071);
  --chart-2: oklch(0.6746 0.1414 261.3380);
  --chart-3: oklch(0.8269 0.1080 211.9627);
  --chart-4: oklch(0.5880 0.0993 245.7394);
  --chart-5: oklch(0.5905 0.1608 148.2409);
  --sidebar: oklch(0.9824 0.0013 286.3757);
  --sidebar-foreground: oklch(0.3211 0 0);
  --sidebar-primary: oklch(0.6487 0.1538 150.3071);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.8269 0.1080 211.9627);
  --sidebar-accent-foreground: oklch(0.3211 0 0);
  --sidebar-border: oklch(0.8699 0 0);
  --sidebar-ring: oklch(0.6487 0.1538 150.3071);
  --font-sans: Plus Jakarta Sans, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.northernLightsDark {
  /* Northern Lights Dark theme */
  --background: oklch(0.2303 0.0125 264.2926);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.3210 0.0078 223.6661);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.3210 0.0078 223.6661);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.6487 0.1538 150.3071);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.5880 0.0993 245.7394);
  --secondary-foreground: oklch(0.9219 0 0);
  --muted: oklch(0.3867 0 0);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.6746 0.1414 261.3380);
  --accent-foreground: oklch(0.9219 0 0);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3867 0 0);
  --input: oklch(0.3867 0 0);
  --ring: oklch(0.6487 0.1538 150.3071);
  --chart-1: oklch(0.6487 0.1538 150.3071);
  --chart-2: oklch(0.5880 0.0993 245.7394);
  --chart-3: oklch(0.6746 0.1414 261.3380);
  --chart-4: oklch(0.8269 0.1080 211.9627);
  --chart-5: oklch(0.5905 0.1608 148.2409);
  --sidebar: oklch(0.2303 0.0125 264.2926);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.6487 0.1538 150.3071);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.6746 0.1414 261.3380);
  --sidebar-accent-foreground: oklch(0.9219 0 0);
  --sidebar-border: oklch(0.3867 0 0);
  --sidebar-ring: oklch(0.6487 0.1538 150.3071);
  --font-sans: Plus Jakarta Sans, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.retroArcade {
  /* Retro Arcade theme based on provided color palette */
  --background: oklch(0.9735 0.0261 90.0953);
  --foreground: oklch(0.3092 0.0518 219.6516);
  --card: oklch(0.9306 0.0260 92.4020);
  --card-foreground: oklch(0.3092 0.0518 219.6516);
  --popover: oklch(0.9306 0.0260 92.4020);
  --popover-foreground: oklch(0.3092 0.0518 219.6516);
  --primary: oklch(0.5924 0.2025 355.8943);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.6437 0.1019 187.3840);
  --secondary-foreground: oklch(1.0000 0 0);
  --muted: oklch(0.6979 0.0159 196.7940);
  --muted-foreground: oklch(0.3092 0.0518 219.6516);
  --accent: oklch(0.5808 0.1732 39.5003);
  --accent-foreground: oklch(1.0000 0 0);
  --destructive: oklch(0.5863 0.2064 27.1172);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.6537 0.0197 205.2618);
  --input: oklch(0.6537 0.0197 205.2618);
  --ring: oklch(0.5924 0.2025 355.8943);
  --chart-1: oklch(0.6149 0.1394 244.9273);
  --chart-2: oklch(0.6437 0.1019 187.3840);
  --chart-3: oklch(0.5924 0.2025 355.8943);
  --chart-4: oklch(0.5808 0.1732 39.5003);
  --chart-5: oklch(0.5863 0.2064 27.1172);
  --sidebar: oklch(0.9735 0.0261 90.0953);
  --sidebar-foreground: oklch(0.3092 0.0518 219.6516);
  --sidebar-primary: oklch(0.5924 0.2025 355.8943);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.6437 0.1019 187.3840);
  --sidebar-accent-foreground: oklch(1.0000 0 0);
  --sidebar-border: oklch(0.6537 0.0197 205.2618);
  --sidebar-ring: oklch(0.5924 0.2025 355.8943);
  --font-sans: Outfit, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Space Mono, monospace;
  --radius: 0.25rem;
  --shadow-2xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
  --shadow-xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
  --shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
  --shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
  --shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
  --shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
  --shadow-xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 8px 10px -1px hsl(196 83% 10% / 0.15);
  --shadow-2xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.38);
}

.retroArcadeDark {
  /* Retro Arcade Dark theme */
  --background: oklch(0.2673 0.0486 219.8169);
  --foreground: oklch(0.6979 0.0159 196.7940);
  --card: oklch(0.3092 0.0518 219.6516);
  --card-foreground: oklch(0.6979 0.0159 196.7940);
  --popover: oklch(0.3092 0.0518 219.6516);
  --popover-foreground: oklch(0.6979 0.0159 196.7940);
  --primary: oklch(0.5924 0.2025 355.8943);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.6437 0.1019 187.3840);
  --secondary-foreground: oklch(1.0000 0 0);
  --muted: oklch(0.5230 0.0283 219.1365);
  --muted-foreground: oklch(0.6979 0.0159 196.7940);
  --accent: oklch(0.5808 0.1732 39.5003);
  --accent-foreground: oklch(1.0000 0 0);
  --destructive: oklch(0.5863 0.2064 27.1172);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.5230 0.0283 219.1365);
  --input: oklch(0.5230 0.0283 219.1365);
  --ring: oklch(0.5924 0.2025 355.8943);
  --chart-1: oklch(0.6149 0.1394 244.9273);
  --chart-2: oklch(0.6437 0.1019 187.3840);
  --chart-3: oklch(0.5924 0.2025 355.8943);
  --chart-4: oklch(0.5808 0.1732 39.5003);
  --chart-5: oklch(0.5863 0.2064 27.1172);
  --sidebar: oklch(0.2673 0.0486 219.8169);
  --sidebar-foreground: oklch(0.6979 0.0159 196.7940);
  --sidebar-primary: oklch(0.5924 0.2025 355.8943);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.6437 0.1019 187.3840);
  --sidebar-accent-foreground: oklch(1.0000 0 0);
  --sidebar-border: oklch(0.5230 0.0283 219.1365);
  --sidebar-ring: oklch(0.5924 0.2025 355.8943);
  --font-sans: Outfit, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: Space Mono, monospace;
  --radius: 0.25rem;
  --shadow-2xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
  --shadow-xs: 2px 2px 4px 0px hsl(196 83% 10% / 0.07);
  --shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
  --shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15);
  --shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15);
  --shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15);
  --shadow-xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 8px 10px -1px hsl(196 83% 10% / 0.15);
  --shadow-2xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.38);
}

.staryNight {
  /* Stary Night theme based on provided color palette */
  --background: oklch(0.9755 0.0045 258.3245);
  --foreground: oklch(0.2558 0.0433 268.0662);
  --card: oklch(0.9341 0.0132 251.5628);
  --card-foreground: oklch(0.2558 0.0433 268.0662);
  --popover: oklch(0.9856 0.0278 98.0540);
  --popover-foreground: oklch(0.2558 0.0433 268.0662);
  --primary: oklch(0.4815 0.1178 263.3758);
  --primary-foreground: oklch(0.9856 0.0278 98.0540);
  --secondary: oklch(0.8567 0.1164 81.0092);
  --secondary-foreground: oklch(0.2558 0.0433 268.0662);
  --muted: oklch(0.9202 0.0080 106.5563);
  --muted-foreground: oklch(0.4815 0.1178 263.3758);
  --accent: oklch(0.6896 0.0714 234.0387);
  --accent-foreground: oklch(0.9856 0.0278 98.0540);
  --destructive: oklch(0.2611 0.0376 322.5267);
  --destructive-foreground: oklch(0.9856 0.0278 98.0540);
  --border: oklch(0.7791 0.0156 251.1926);
  --input: oklch(0.6896 0.0714 234.0387);
  --ring: oklch(0.8567 0.1164 81.0092);
  --chart-1: oklch(0.4815 0.1178 263.3758);
  --chart-2: oklch(0.8567 0.1164 81.0092);
  --chart-3: oklch(0.6896 0.0714 234.0387);
  --chart-4: oklch(0.7791 0.0156 251.1926);
  --chart-5: oklch(0.2611 0.0376 322.5267);
  --sidebar: oklch(0.9341 0.0132 251.5628);
  --sidebar-foreground: oklch(0.2558 0.0433 268.0662);
  --sidebar-primary: oklch(0.4815 0.1178 263.3758);
  --sidebar-primary-foreground: oklch(0.9856 0.0278 98.0540);
  --sidebar-accent: oklch(0.8567 0.1164 81.0092);
  --sidebar-accent-foreground: oklch(0.2558 0.0433 268.0662);
  --sidebar-border: oklch(0.7791 0.0156 251.1926);
  --sidebar-ring: oklch(0.8567 0.1164 81.0092);
  --font-sans: Libre Baskerville, serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.staryNightDark {
  /* Stary Night Dark theme */
  --background: oklch(0.2204 0.0198 275.8439);
  --foreground: oklch(0.9366 0.0129 266.6974);
  --card: oklch(0.2703 0.0407 281.3036);
  --card-foreground: oklch(0.9366 0.0129 266.6974);
  --popover: oklch(0.2703 0.0407 281.3036);
  --popover-foreground: oklch(0.9097 0.1440 95.1120);
  --primary: oklch(0.4815 0.1178 263.3758);
  --primary-foreground: oklch(0.9097 0.1440 95.1120);
  --secondary: oklch(0.9097 0.1440 95.1120);
  --secondary-foreground: oklch(0.2703 0.0407 281.3036);
  --muted: oklch(0.2703 0.0407 281.3036);
  --muted-foreground: oklch(0.6243 0.0412 262.0375);
  --accent: oklch(0.8469 0.0524 264.7751);
  --accent-foreground: oklch(0.2204 0.0198 275.8439);
  --destructive: oklch(0.5280 0.1200 357.1130);
  --destructive-foreground: oklch(0.9097 0.1440 95.1120);
  --border: oklch(0.3072 0.0287 281.7681);
  --input: oklch(0.4815 0.1178 263.3758);
  --ring: oklch(0.9097 0.1440 95.1120);
  --chart-1: oklch(0.4815 0.1178 263.3758);
  --chart-2: oklch(0.7395 0.2268 142.8504);
  --chart-3: oklch(0.8148 0.0819 225.7537);
  --chart-4: oklch(0.9680 0.2110 109.7692);
  --chart-5: oklch(0.8652 0.1768 90.3816);
  --sidebar: oklch(0.2703 0.0407 264.2926);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.4815 0.1178 263.3758);
  --sidebar-primary-foreground: oklch(0.9097 0.1440 95.1120);
  --sidebar-accent: oklch(0.9097 0.1440 95.1120);
  --sidebar-accent-foreground: oklch(0.2703 0.0407 281.3036);
  --sidebar-border: oklch(0.3072 0.0287 281.7681);
  --sidebar-ring: oklch(0.9097 0.1440 95.1120);
  --font-sans: Libre Baskerville, serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --radius: 0.5rem;
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.tangerine {
  /* Tangerine theme based on provided color palette */
  --background: oklch(0.9383 0.0042 236.4993);
  --foreground: oklch(0.3211 0 0);
  --card: oklch(1.0000 0 0);
  --card-foreground: oklch(0.3211 0 0);
  --popover: oklch(1.0000 0 0);
  --popover-foreground: oklch(0.3211 0 0);
  --primary: oklch(0.6397 0.1720 36.4421);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.9670 0.0029 264.5419);
  --secondary-foreground: oklch(0.4461 0.0263 256.8018);
  --muted: oklch(0.9846 0.0017 247.8389);
  --muted-foreground: oklch(0.5510 0.0234 264.3637);
  --accent: oklch(0.9119 0.0222 243.8174);
  --accent-foreground: oklch(0.3791 0.1378 265.5222);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.9022 0.0052 247.8822);
  --input: oklch(0.9700 0.0029 264.5420);
  --ring: oklch(0.6397 0.1720 36.4421);
  --chart-1: oklch(0.7156 0.0605 248.6845);
  --chart-2: oklch(0.7875 0.0917 35.9616);
  --chart-3: oklch(0.5778 0.0759 254.1573);
  --chart-4: oklch(0.5016 0.0849 259.4902);
  --chart-5: oklch(0.4241 0.0952 264.0306);
  --sidebar: oklch(0.9030 0.0046 258.3257);
  --sidebar-foreground: oklch(0.3211 0 0);
  --sidebar-primary: oklch(0.6397 0.1720 36.4421);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.9119 0.0222 243.8174);
  --sidebar-accent-foreground: oklch(0.3791 0.1378 265.5222);
  --sidebar-border: oklch(0.9276 0.0058 264.5313);
  --sidebar-ring: oklch(0.6397 0.1720 36.4421);
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

.tangerineDark {
  /* Tangerine Dark theme */
  --background: oklch(0.2598 0.0306 262.6666);
  --foreground: oklch(0.9219 0 0);
  --card: oklch(0.3210 0.0078 223.6661);
  --card-foreground: oklch(0.9219 0 0);
  --popover: oklch(0.3210 0.0078 223.6661);
  --popover-foreground: oklch(0.9219 0 0);
  --primary: oklch(0.6397 0.1720 36.4421);
  --primary-foreground: oklch(1.0000 0 0);
  --secondary: oklch(0.3095 0.0266 266.7132);
  --secondary-foreground: oklch(0.9219 0 0);
  --muted: oklch(0.3095 0.0266 266.7132);
  --muted-foreground: oklch(0.7155 0 0);
  --accent: oklch(0.3380 0.0589 267.5867);
  --accent-foreground: oklch(0.8823 0.0571 254.1284);
  --destructive: oklch(0.6368 0.2078 25.3313);
  --destructive-foreground: oklch(1.0000 0 0);
  --border: oklch(0.3867 0 0);
  --input: oklch(0.3867 0 0);
  --ring: oklch(0.6397 0.1720 36.4421);
  --chart-1: oklch(0.7156 0.0605 248.6845);
  --chart-2: oklch(0.7693 0.0876 34.1875);
  --chart-3: oklch(0.5778 0.0759 254.1573);
  --chart-4: oklch(0.5016 0.0849 259.4902);
  --chart-5: oklch(0.4241 0.0952 264.0306);
  --sidebar: oklch(0.3100 0.0283 267.7408);
  --sidebar-foreground: oklch(0.9219 0 0);
  --sidebar-primary: oklch(0.6397 0.1720 36.4421);
  --sidebar-primary-foreground: oklch(1.0000 0 0);
  --sidebar-accent: oklch(0.3380 0.0589 267.5867);
  --sidebar-accent-foreground: oklch(0.8823 0.0571 254.1284);
  --sidebar-border: oklch(0.3843 0.0301 269.7337);
  --sidebar-ring: oklch(0.6397 0.1720 36.4421);
  --font-sans: Inter, sans-serif;
  --font-serif: Source Serif 4, serif;
  --font-mono: JetBrains Mono, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0px 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.25);
}

/* Custom Theme - Applied via inline styles by ThemeManager */
.custom {
  /* Base styles that might not be overridden by inline vars */
  /* Example: --radius: 0.5rem; */

  /* Apply custom font if set */
  font-family: var(--custom-font-family, var(--font-sans));
  font-size: var(--custom-font-size, 16px);

  /* Use CSS variables set by ThemeManager */
  --background: var(--background);
  --foreground: var(--foreground);
  --card: var(--card);
  --card-foreground: var(--card-foreground);
  --popover: var(--popover);
  --popover-foreground: var(--popover-foreground);
  --primary: var(--primary);
  --primary-foreground: var(--primary-foreground);
  --secondary: var(--secondary);
  --secondary-foreground: var(--secondary-foreground);
  --muted: var(--muted);
  --muted-foreground: var(--muted-foreground);
  --accent: var(--accent);
  --accent-foreground: var(--accent-foreground);
  --destructive: var(--destructive);
  --destructive-foreground: var(--destructive-foreground);
  --border: var(--border);
  --input: var(--input);
  --ring: var(--ring);
  --chart-1: var(--chart-1);
  --chart-2: var(--chart-2);
  --chart-3: var(--chart-3);
  --chart-4: var(--chart-4);
  --chart-5: var(--chart-5);
  --sidebar: var(--sidebar);
  --sidebar-foreground: var(--sidebar-foreground);
  --sidebar-primary: var(--sidebar-primary);
  --sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --sidebar-accent: var(--sidebar-accent);
  --sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --sidebar-border: var(--sidebar-border);
  --sidebar-ring: var(--sidebar-ring);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
    /* Apply custom font if set */
    font-family: var(--custom-font-family, var(--font-sans));
    font-size: var(--custom-font-size, 16px);
  }

  /* Theme class variants */
  body.dark,
  body.TijuLight,
  body.TijuDark,
  body.bubblegum,
  body.bubblegumDark,
  body.candyland,
  body.candylandDark,
  body.doom64,
  body.doom64Dark,
  body.luxury,
  body.luxuryDark,
  body.northernLights,
  body.northernLightsDark,
  body.retroArcade,
  body.retroArcadeDark,
  body.staryNight,
  body.staryNightDark,
  body.tangerine,
  body.tangerineDark,
  body.custom {
    @apply transition-colors duration-300;
  }
}

/* --- STYLES FOR MARKDOWN CONTENT --- */
@layer utilities {
  .markdown-content {
    @apply text-base leading-relaxed;
  }
  .markdown-content h1 {
    @apply text-3xl font-bold my-4 text-foreground;
  }
  .markdown-content h2 {
    @apply text-2xl font-semibold my-3 text-foreground;
  }
  .markdown-content h3 {
    @apply text-xl font-semibold my-2 text-foreground;
  }
  .markdown-content p {
    @apply my-4 text-foreground;
  }
  /* Inline code */
  .markdown-content code:not(pre > code) {
    @apply bg-muted text-muted-foreground px-1.5 py-0.5 rounded
      text-[0.9em] font-mono;
  }

  /* Markdown code blocks (not using CodeBlock component) */
  .markdown-content pre:not(.code-block-content) {
    @apply border border-border rounded-md overflow-x-auto;
  }
  .markdown-content pre:not(.code-block-content) > code.hljs {
    @apply font-mono text-sm leading-relaxed block p-4;
  }
  .markdown-content blockquote {
    @apply border-l-4 border-border pl-4 italic
      text-muted-foreground my-4;
  }
  .markdown-content ul {
    @apply list-disc list-outside pl-6 my-4;
  }
  .markdown-content ol {
    @apply list-decimal list-outside pl-6 my-4;
  }
  .markdown-content li {
    @apply my-1;
  }
  .markdown-content table {
    @apply border-collapse w-full my-4 text-sm;
  }
  .markdown-content th,
  .markdown-content td {
    @apply border border-border px-3 py-2 text-left;
  }
  .markdown-content th {
    @apply bg-muted/80 dark:bg-muted/50 font-semibold;
  }
  .markdown-content a {
    @apply text-primary underline hover:text-primary/80;
  }

  /* --- THEMED CODEBLOCK STYLING (Container/Header) --- */
  .code-block-container {
    @apply relative my-4 border border-border rounded-lg;
  }

  /* Header styling */
  .code-block-header {
    @apply flex items-center justify-between px-3 py-2
      border-b border-border bg-muted/50;
    position: sticky;
    /* Adjust top based on the height of the CardHeader */
    top: var(--card-header-height, 3.5rem);
    z-index: 5; /* Lower than CardHeader's z-index */
  }

  /* Code block content - minimal styling to not override external themes */
  .code-block-content {
    @apply text-sm m-0 overflow-x-auto;
  }

  /* Ensure code tag within pre takes up space */
  .code-block-content code {
    @apply block p-4;
  }

  .folded-content-preview {
    @apply cursor-pointer text-muted-foreground italic text-xs max-h-20 overflow-hidden relative w-full;
  }
  .folded-content-preview::after {
    content: "";
    @apply absolute bottom-0 left-0 right-0 h-6 bg-gradient-to-t from-card to-transparent;
  }

  /* Utility for word wrapping in specific contexts */
  .overflow-wrap-anywhere {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Mermaid diagram styles */
  .mermaid-container {
    @apply flex justify-center items-center min-h-[100px];
  }

  .mermaid-container svg {
    @apply max-w-full h-auto;
  }

  /* Ensure Mermaid diagrams are readable in both light and dark themes */
  .mermaid-container svg text {
    fill: hsl(var(--foreground));
  }

  .mermaid-container svg .node rect,
  .mermaid-container svg .node circle,
  .mermaid-container svg .node ellipse,
  .mermaid-container svg .node polygon {
    fill: hsl(var(--card));
    stroke: hsl(var(--border));
  }

  .mermaid-container svg .edgePath path {
    stroke: hsl(var(--muted-foreground));
  }

  .mermaid-container svg .arrowheadPath {
    fill: hsl(var(--muted-foreground));
  }
} /* End @layer utilities */

/* Custom scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  @apply bg-muted/30 rounded-full;
}
::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/50 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/70;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-fadeIn {
  animation: fadeIn 0.3s ease-out forwards;
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-100%);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.animate-slideInFromLeft {
  animation: slideInFromLeft 0.3s ease-out forwards;
}

/* Add slideOutToLeft if needed for closing animation */
@keyframes slideOutToLeft {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-100%);
    opacity: 0.8;
  }
}
.animate-slideOutToLeft {
  animation: slideOutToLeft 0.3s ease-out forwards;
}

/* Keep slideInFromTop for other elements */
@keyframes slideInFromTop {
  from {
    transform: translateY(-10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.animate-slideInFromTop {
  animation: slideInFromTop 0.3s ease-out forwards;
}
