/* ============================================
   CSS Custom Properties - MagicWeather Theme
   Converted from Tailwind CSS + theme.json
   ============================================ */

:root {
    /* Semantic color tokens (light mode) */
    --background: 210 40% 98%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --primary: 206 85% 44%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222 47% 11%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 210 40% 98%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 206 85% 44%;

    /* Chart colors */
    --chart-1: 206 85% 44%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;

    /* Gradient tokens */
    --primary-gradient: linear-gradient(45deg, #2563eb, #3b82f6, #38bdf8);
    --weather-gradient: linear-gradient(to right, #3b82f6, #60a5fa, #38bdf8);

    /* Tailwind color palette (extracted values) */
    --blue-50: #eff6ff;
    --blue-100: #dbeafe;
    --blue-200: #bfdbfe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;
    --blue-800: #1e40af;
    --blue-900: #1e3a8a;

    --sky-50: #f0f9ff;
    --sky-100: #e0f2fe;
    --sky-300: #7dd3fc;
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;

    --indigo-50: #eef2ff;
    --indigo-100: #e0e7ff;
    --indigo-400: #818cf8;
    --indigo-500: #6366f1;
    --indigo-900: #312e81;
    --indigo-950: #1e1b4b;

    --purple-400: #c084fc;
    --purple-500: #a855f7;
    --purple-600: #9333ea;

    --teal-400: #2dd4bf;

    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    --yellow-300: #fde047;
    --yellow-400: #facc15;
    --yellow-500: #eab308;

    --orange-300: #fdba74;
    --orange-500: #f97316;

    --red-500: #ef4444;
    --red-600: #dc2626;

    --green-500: #22c55e;
    --green-600: #16a34a;

    --green-50: #f0fdf4;
    --green-100: #dcfce7;
    --green-200: #bbf7d0;
    --green-700: #15803d;

    --red-50: #fef2f2;
    --red-100: #fee2e2;
    --red-400: #f87171;
    --red-700: #b91c1c;

    --orange-400: #fb923c;

    --yellow-50: #fefce8;
    --yellow-100: #fef9c3;

    --blue-950: #172554;

    --teal-500: #14b8a6;

    --purple-100: #f3e8ff;
    --purple-200: #e9d5ff;
    --purple-900: #581c87;

    --indigo-200: #c7d2fe;
    --indigo-600: #4f46e5;
    --indigo-800: #3730a3;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* Fluid Typography */
    --heading-1: clamp(2.25rem, 5vw, 3.5rem);
    --heading-2: clamp(1.75rem, 4vw, 2.5rem);
    --heading-3: clamp(1.375rem, 3vw, 1.875rem);
    --heading-4: clamp(1.125rem, 2.5vw, 1.5rem);
    --heading-5: 1.125rem;
    --heading-6: 1rem;

    /* Font */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Border Radius */
    --radius: 0.75rem;
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;

    /* Shadows - Premium depth */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
    --shadow-md: 0 4px 8px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
    --shadow-lg: 0 12px 20px -4px rgb(0 0 0 / 0.08), 0 4px 8px -4px rgb(0 0 0 / 0.03);
    --shadow-xl: 0 24px 40px -8px rgb(0 0 0 / 0.1), 0 8px 16px -6px rgb(0 0 0 / 0.04);
    --shadow-card: 0 1px 3px rgb(0 0 0 / 0.04), 0 4px 12px rgb(0 0 0 / 0.06);
    --shadow-card-hover: 0 8px 24px rgb(0 0 0 / 0.1), 0 2px 8px rgb(0 0 0 / 0.04);

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}