@layer base {
  :root {
    --primary: 221 83% 53%;
    --primary-foreground: 0 0% 100%;
    
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    
    --card: 0 0% 100%;
    --border: 214 32% 91%;
    --ring: 221 83% 53%;
  }

  .dark {
    --primary: 221 83% 53%;
    --background: 222 47% 11%;
    --foreground: 213 31% 91%;
    --card: 224 71% 4%;
    --border: 216 34% 17%;
  }
}

export default {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: 'hsl(var(--primary))',
          foreground: 'hsl(var(--primary-foreground))',
        },
      },
    },
  },
};

'use client';

import { useTheme } from 'next-themes';
import { Moon, Sun } from 'lucide-react';

export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      <Sun className="dark:hidden" />
      <Moon className="hidden dark:block" />
    </button>
  );
}

// Hex to HSL
function hexToHSL(hex: string) {
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;
  
  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h = 0, s = 0, l = (max + min) / 2;
  
  if (max !== min) {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    h = max === r ? (g - b) / d : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
    h = (h / 6 + (h < 0 ? 1 : 0)) * 360;
  }
  
  return `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
}

hexToHSL('#3b82f6'); // "221 83% 53%"