:root[data-theme="blue"] {
    /* Light mode colors */
    --background: 210 100% 98%; /* Light blue background */
    --foreground: 220 15% 20%; /* Dark text color */

    --muted: 210 50% 95%; /* Very light blue */
    --muted-foreground: 220 15% 40%; /* Muted text color */

    --popover: 210 100% 98%; /* Popover background */
    --popover-foreground: 220 15% 20%; /* Popover text color */

    --border: 210 50% 85%; /* Light border */
    --input: 210 50% 95%; /* Input background */

    --card: 210 50% 97%; /* Card background */
    --card-foreground: 220 15% 20%; /* Card text color */

    --primary: 220 80% 54.5%; /* Bright blue primary elements */
    --primary-foreground: 0 0% 100%; /* White text */

    --secondary: 210 50% 90%; /* Secondary elements background */
    --secondary-foreground: 220 15% 25%; /* Secondary text color */

    --accent: 220 80% 55.5%; /* Accent color */
    --accent-foreground: 0 0% 100%; /* White text */

    --destructive: 0 80% 52%; /* Red for destructive actions */
    --destructive-foreground: 0 0% 100%; /* White text */

    --ring: 220 80% 65%; /* Focus ring color */

    --radius: 0.5rem;
  }

  :root[data-theme="blue"].dark {
    /* Dark mode colors */
    --background: 220 50% 10%; /* Dark blue background */
    --foreground: 220 15% 85%; /* Light text color */

    --muted: 220 30% 15%; /* Muted elements background */
    --muted-foreground: 220 15% 75%; /* Muted text color */

    --popover: 220 50% 12%; /* Popover background */
    --popover-foreground: 220 15% 85%; /* Popover text color */

    --border: 220 50% 20%; /* Border color */
    --input: 220 50% 15%; /* Input background */

    --card: 220 50% 12%; /* Card background */
    --card-foreground: 220 15% 85%; /* Card text color */

    --primary: 220 80% 60%; /* Bright blue primary elements */
    --primary-foreground: 0 0% 0%; /* White text */

    --secondary: 220 50% 25%; /* Secondary elements background */
    --secondary-foreground: 220 15% 80%; /* Secondary text color */

    --accent: 220 80% 50%; /* Accent color */
    --accent-foreground: 0 0% 100%; /* White text */

    --destructive: 0 80% 50%; /* Red for destructive actions */
    --destructive-foreground: 0 0% 100%; /* White text */

    --ring: 220 50% 45.5%; /* Focus ring color */

    --radius: 0.5rem;
  }