/* WeatherCA.net Custom Premium Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');

:root {
    /* Brand Blues — primary action, nav, links */
    --color-sky-900: #0A2540;      /* darkest navy — main nav bg */
    --color-sky-800: #0D3166;      /* dark blue — section headers */
    --color-sky-600: #1A5EAB;      /* mid blue — interactive elements */
    --color-sky-500: #2D7DD2;      /* brand blue — CTAs, active states */
    --color-sky-400: #4A95E0;      /* medium blue — icons, highlights */
    --color-sky-100: #E8F2FC;      /* pale blue — section bg, cards */
    --color-sky-50:  #F0F7FF;      /* near-white blue — page bg tint */

    /* Weather Condition Colors */
    --color-sunny:   #F59E0B;      /* warm amber — sunny conditions */
    --color-cloudy:  #6B7280;      /* neutral gray — overcast */
    --color-rainy:   #3B82F6;      /* blue — rain conditions */
    --color-snowy:   #93C5FD;      /* light blue — snow */
    --color-stormy:  #4B5563;      /* dark gray — thunderstorms */
    --color-foggy:   #9CA3AF;      /* muted gray — fog/haze */
    --color-windy:   #10B981;      /* teal-green — wind events */

    /* Temperature Gradient Scale */
    --temp-extreme-cold: #1E3A8A;  /* < -30°C */
    --temp-very-cold:    #3B82F6;  /* -30 to -15°C */
    --temp-cold:         #60A5FA;  /* -15 to 0°C */
    --temp-cool:         #34D399;  /* 0 to 10°C */
    --temp-mild:         #A3E635;  /* 10 to 20°C */
    --temp-warm:         #FBBF24;  /* 20 to 30°C */
    --temp-hot:          #F97316;  /* 30 to 38°C */
    --temp-extreme-hot:  #DC2626;  /* > 38°C */

    /* Alert Colors */
    --alert-extreme:  #7F1D1D;     /* deep red */
    --alert-severe:   #B91C1C;     /* red */
    --alert-moderate: #D97706;     /* amber */
    --alert-minor:    #1D4ED8;     /* blue */

    /* Neutral Scale */
    --gray-950: #0A0F1A;
    --gray-900: #111827;
    --gray-800: #1F2937;
    --gray-700: #374151;
    --gray-500: #6B7280;
    --gray-300: #D1D5DB;
    --gray-100: #F3F4F6;
    --gray-50:  #F9FAFB;
    --white:    #FFFFFF;

    /* Typography */
    --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* Spacing */
    --container-max: 1280px;
    --content-max:   760px;

    /* Borders & Radius */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-card:   0 1px 3px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.05);
    --shadow-elevated: 0 4px 16px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);
    --shadow-modal:  0 20px 60px rgba(0,0,0,.25);
}

/* Base Styles */
body {
    font-family: var(--font-sans);
    color: var(--gray-900);
    background-color: var(--gray-50);
    line-height: 1.5;
}

/* Typography Classes */
.font-sans { font-family: var(--font-sans); }
.font-serif { font-family: var(--font-serif); }
.font-mono { font-family: var(--font-mono); }

h1, .h1 { font-weight: 700; font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.03em; font-family: var(--font-sans); }
h2, .h2 { font-weight: 600; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.02em; font-family: var(--font-sans); }
h3, .h3 { font-weight: 600; font-size: 1.375rem; line-height: 1.3; font-family: var(--font-sans); }
h4, .h4 { font-weight: 500; font-size: 1.125rem; line-height: 1.4; font-family: var(--font-sans); }

.prose p {
    font-family: var(--font-serif);
    font-size: 1.0625rem;
    line-height: 1.75;
    color: var(--gray-700);
    margin-bottom: 1.25rem;
}

/* Temperature Display Styling */
.temp-display {
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: -0.04em;
}
.temp-unit {
    font-family: var(--font-sans);
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--gray-500);
}

/* Scrollbar Helper */
.scrollbar-thin::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--gray-300);
    border-radius: var(--radius-full);
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: var(--gray-500);
}

/* Interactive Map and SVG styles */
.canada-map path {
    transition: fill 0.3s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
.canada-map path:hover {
    stroke: #ffffff !important;
    stroke-width: 2.5px !important;
    opacity: 0.95;
    filter: brightness(1.15) drop-shadow(0 0 10px rgba(255, 255, 255, 0.45)) !important;
}
.canada-map path.active-province {
    stroke: #ffffff !important;
    stroke-width: 2.5px !important;
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(255, 255, 255, 0.55)) !important;
}

/* Dynamic Temperature Border Classes based on temperature values */
.border-temp-extreme-cold { border-color: var(--temp-extreme-cold); }
.border-temp-very-cold { border-color: var(--temp-very-cold); }
.border-temp-cold { border-color: var(--temp-cold); }
.border-temp-cool { border-color: var(--temp-cool); }
.border-temp-mild { border-color: var(--temp-mild); }
.border-temp-warm { border-color: var(--temp-warm); }
.border-temp-hot { border-color: var(--temp-hot); }
.border-temp-extreme-hot { border-color: var(--temp-extreme-hot); }

/* Dynamic Background Gradients depending on weather condition */
.bg-weather-sunny {
    background: linear-gradient(135deg, #FFB300 0%, #F59E0B 50%, #D97706 100%);
}
.bg-weather-cloudy {
    background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 50%, #4B5563 100%);
}
.bg-weather-rainy {
    background: linear-gradient(135deg, #60A5FA 0%, #3B82F6 50%, #2563EB 100%);
}
.bg-weather-snowy {
    background: linear-gradient(135deg, #BFDBFE 0%, #93C5FD 50%, #60A5FA 100%);
}
.bg-weather-stormy {
    background: linear-gradient(135deg, #4B5563 0%, #374151 50%, #1F2937 100%);
}
.bg-weather-foggy {
    background: linear-gradient(135deg, #D1D5DB 0%, #9CA3AF 50%, #6B7280 100%);
}
.bg-weather-windy {
    background: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
}
.bg-weather-clear-night {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 50%, #020617 100%);
}

/* Card lift and interactive effects */
.hover-lift {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-elevated);
}

/* Alpine Transitions */
[x-cloak] { display: none !important; }