@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&family=Nunito:wght@300;400;500;600;700;800;900&display=swap');
/* ================================
   MODERN TYPOGRAPHY SYSTEM
   ================================ */
:root {
    --font-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    --text-xs: 0.75rem;     
    --text-sm: 0.875rem;    
    --text-base: 1rem;      
    --text-lg: 1.125rem;    
    --text-xl: 1.25rem;     
    --text-2xl: 1.5rem;     
    --text-3xl: 1.875rem;   
    --text-4xl: 2.25rem;    
    --text-5xl: 3rem;       
    --text-6xl: 3.75rem;    
    --text-7xl: 4.5rem;     
    --text-8xl: 6rem;       
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;
    --tracking-tighter: -0.05em;
    --tracking-tight: -0.025em;
    --tracking-normal: 0em;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --tracking-widest: 0.1em;
}
/* ================================
   THEME SYSTEM - Light & Dark Mode
   ================================ */
:root {
    --primary: #C87579;
    --primary-light: #E5989B;
    --primary-lighter: #FFB4A2;
    --primary-dark: #A85D62;
    --accent-blue-light: #B5838D;
    --accent-gray: #B5838D;
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #6D6875;
    --accent-pink: #E5989B;
    --accent-orange: #FFCDB2;
    --accent-teal: #B5838D;
    --accent-indigo: #6D6875;
    --background: #ffffff;
    --background-light: #fafafb;
    --background-subtle: #f8fafc;
    --surface: #ffffff;
    --surface-elevated: #ffffff;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --text-inverse: #ffffff;
    --border: #e5e7eb;
    --border-light: #f3f4f6;
    --border-dark: #d1d5db;
    --divider: rgba(229, 231, 235, 0.3);
    --accent-green: #e6f4eb;
    --accent-purple: #f1edfb;
    --accent-blue: #eff6ff;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    --hover-overlay: rgba(0, 0, 0, 0.05);
    --focus-ring: #FEA689;
    --focus-ring-offset: #ffffff;
}
html.dark {
    --background: #0f172a;
    --background-light: #1e293b;
    --background-subtle: #334155;
    --surface: #1e293b;
    --surface-elevated: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #e2e8f0;
    --text-tertiary: #cbd5e1;
    --text-inverse: #0f172a;
    --border: #475569;
    --border-light: #64748b;
    --border-dark: #334155;
    --divider: rgba(71, 85, 105, 0.3);
    --accent-green: #064e3b;
    --accent-purple: #581c87;
    --accent-blue: #1e3a8a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
    --hover-overlay: rgba(255, 255, 255, 0.1);
    --focus-ring: #FF63C3;
    --focus-ring-offset: #0A2540;
}
html.dark body {
    /* Subtle animated dark gradient — same dark slate tones as Tailwind slate-900 */
    background: linear-gradient(135deg, #0f172a 0%, #111827 25%, #0f172a 50%, #111827 75%, #0f172a 100%);
    background-size: 200% 200%;
    animation: bodyGradientShift 12s ease-in-out infinite;
    color: #f1f5f9; /* slate-100 */
}

/* ================================
   DARK MODE TAILWIND OVERRIDES
   ================================ */
/* Override Tailwind classes for dark mode */

/* CRITICAL: Override text-black class - widely used in components */
html.dark .text-black {
    color: var(--text-primary) !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark .text-gray-700,
html.dark .text-gray-600 {
    color: var(--text-primary) !important;
}

html.dark .text-gray-500 {
    color: var(--text-secondary) !important;
}

html.dark .text-gray-400 {
    color: var(--text-tertiary) !important;
}

/* Background colors */
html.dark .bg-white {
    background-color: var(--surface) !important;
}

html.dark .bg-gray-50,
html.dark .bg-gray-100 {
    background-color: var(--background-light) !important;
}

/* Colored backgrounds - make them darker and more subtle */
html.dark .bg-blue-50    { background-color: rgba(59,  130, 246, 0.1) !important; }
html.dark .bg-green-50   { background-color: rgba(34,  197, 94,  0.1) !important; }
html.dark .bg-emerald-50 { background-color: rgba(16,  185, 129, 0.1) !important; }
html.dark .bg-teal-50    { background-color: rgba(20,  184, 166, 0.1) !important; }
html.dark .bg-cyan-50    { background-color: rgba(6,   182, 212, 0.1) !important; }
html.dark .bg-sky-50     { background-color: rgba(14,  165, 233, 0.1) !important; }
html.dark .bg-indigo-50  { background-color: rgba(99,  102, 241, 0.1) !important; }
html.dark .bg-violet-50  { background-color: rgba(139, 92,  246, 0.1) !important; }
html.dark .bg-purple-50  { background-color: rgba(168, 85,  247, 0.1) !important; }
html.dark .bg-pink-50    { background-color: rgba(236, 72,  153, 0.1) !important; }
html.dark .bg-rose-50    { background-color: rgba(244, 63,  94,  0.1) !important; }
html.dark .bg-red-50     { background-color: rgba(239, 68,  68,  0.1) !important; }
html.dark .bg-orange-50  { background-color: rgba(249, 115, 22,  0.1) !important; }
html.dark .bg-amber-50   { background-color: rgba(245, 158, 11,  0.1) !important; }
html.dark .bg-yellow-50  { background-color: rgba(234, 179, 8,   0.1) !important; }
html.dark .bg-lime-50    { background-color: rgba(132, 204, 22,  0.1) !important; }

/* Colored text - make them lighter */
html.dark .text-blue-900,   html.dark .text-blue-800,   html.dark .text-blue-700,   html.dark .text-blue-600   { color: #93C5FD !important; }
html.dark .text-green-900,  html.dark .text-green-800,  html.dark .text-green-700,  html.dark .text-green-600  { color: #86EFAC !important; }
html.dark .text-emerald-900,html.dark .text-emerald-800,html.dark .text-emerald-700,html.dark .text-emerald-600 { color: #6EE7B7 !important; }
html.dark .text-teal-900,   html.dark .text-teal-800,   html.dark .text-teal-700,   html.dark .text-teal-600   { color: #5EEAD4 !important; }
html.dark .text-cyan-900,   html.dark .text-cyan-800,   html.dark .text-cyan-700,   html.dark .text-cyan-600   { color: #67E8F9 !important; }
html.dark .text-sky-900,    html.dark .text-sky-800,    html.dark .text-sky-700,    html.dark .text-sky-600    { color: #7DD3FC !important; }
html.dark .text-indigo-900, html.dark .text-indigo-800, html.dark .text-indigo-700, html.dark .text-indigo-600 { color: #A5B4FC !important; }
html.dark .text-violet-900, html.dark .text-violet-800, html.dark .text-violet-700, html.dark .text-violet-600 { color: #C4B5FD !important; }
html.dark .text-purple-900, html.dark .text-purple-800, html.dark .text-purple-700, html.dark .text-purple-600 { color: #D8B4FE !important; }
html.dark .text-pink-900,   html.dark .text-pink-800,   html.dark .text-pink-700,   html.dark .text-pink-600   { color: #F9A8D4 !important; }
html.dark .text-rose-900,   html.dark .text-rose-800,   html.dark .text-rose-700,   html.dark .text-rose-600   { color: #FDA4AF !important; }
html.dark .text-red-900,    html.dark .text-red-800,    html.dark .text-red-700,    html.dark .text-red-600    { color: #FCA5A5 !important; }
html.dark .text-orange-900, html.dark .text-orange-800, html.dark .text-orange-700, html.dark .text-orange-600 { color: #FDBA74 !important; }
html.dark .text-amber-900,  html.dark .text-amber-800,  html.dark .text-amber-700,  html.dark .text-amber-600  { color: #FCD34D !important; }
html.dark .text-yellow-900, html.dark .text-yellow-800, html.dark .text-yellow-700, html.dark .text-yellow-600 { color: #FDE047 !important; }
html.dark .text-lime-900,   html.dark .text-lime-800,   html.dark .text-lime-700,   html.dark .text-lime-600   { color: #BEF264 !important; }

/* Borders */
html.dark .border-gray-200,  html.dark .border-gray-300   { border-color: var(--border) !important; }
html.dark .border-blue-200   { border-color: rgba(59,  130, 246, 0.3) !important; }
html.dark .border-green-200  { border-color: rgba(34,  197, 94,  0.3) !important; }
html.dark .border-emerald-200{ border-color: rgba(16,  185, 129, 0.3) !important; }
html.dark .border-teal-200   { border-color: rgba(20,  184, 166, 0.3) !important; }
html.dark .border-cyan-200   { border-color: rgba(6,   182, 212, 0.3) !important; }
html.dark .border-sky-200    { border-color: rgba(14,  165, 233, 0.3) !important; }
html.dark .border-indigo-200 { border-color: rgba(99,  102, 241, 0.3) !important; }
html.dark .border-violet-200 { border-color: rgba(139, 92,  246, 0.3) !important; }
html.dark .border-purple-200 { border-color: rgba(168, 85,  247, 0.3) !important; }
html.dark .border-pink-200   { border-color: rgba(236, 72,  153, 0.3) !important; }
html.dark .border-rose-200   { border-color: rgba(244, 63,  94,  0.3) !important; }
html.dark .border-red-200    { border-color: rgba(239, 68,  68,  0.3) !important; }
html.dark .border-orange-200 { border-color: rgba(249, 115, 22,  0.3) !important; }
html.dark .border-amber-200  { border-color: rgba(245, 158, 11,  0.3) !important; }
html.dark .border-yellow-200 { border-color: rgba(234, 179, 8,   0.3) !important; }
html.dark .border-lime-200   { border-color: rgba(132, 204, 22,  0.3) !important; }

/* Gradients — obsługiwane przez Tailwind dark: prefix, bez override */

/* White badges and cards with borders */
html.dark .bg-white\/90 {
    background-color: var(--surface) !important;
}

html.dark .backdrop-blur-sm {
    backdrop-filter: blur(8px) !important;
}

/* Body text color override */
html.dark body.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Prose (article) content */
html.dark .prose {
    color: var(--text-primary) !important;
}

html.dark .prose p {
    color: var(--text-primary) !important;
}

html.dark .prose h1,
html.dark .prose h2,
html.dark .prose h3,
html.dark .prose h4 {
    color: var(--text-primary) !important;
}

/* Lists */
html.dark .prose ul li,
html.dark .prose ol li {
    color: var(--text-primary) !important;
}

/* Rounded colored badges/dots */
html.dark .bg-blue-500,
html.dark .bg-green-500,
html.dark .bg-emerald-500,
html.dark .bg-purple-500,
html.dark .bg-orange-500,
html.dark .bg-red-500 {
    filter: brightness(1.2) !important;
}

/* ================================
   NAVIGATION DARK MODE FIXES
   ================================ */

/* Fix navigation container background for light mode */
:root .nav-container {
    background: rgba(255, 255, 255, 0.95) !important;
}

/* Fix navigation container background for dark mode */
html.dark .nav-container {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
}

/* Fix scrolled navigation background - light mode */
:root .floating-nav.scrolled .nav-container {
    background: rgba(255, 255, 255, 0.98) !important;
}

/* Fix scrolled navigation background - dark mode */
html.dark .floating-nav.scrolled .nav-container {
    background: rgba(30, 41, 59, 0.98) !important;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4) !important;
}

/* Fix mobile menu overlay - light mode */
:root .mobile-menu {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* Fix mobile menu overlay - dark mode */
html.dark .mobile-menu {
    background: rgba(15, 23, 42, 0.8) !important;
}

/* Fix dropdown menu visibility in dark mode */
html.dark .dropdown-menu {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

/* Fix dropdown items in dark mode */
html.dark .dropdown-item {
    color: var(--text-secondary) !important;
}

html.dark .dropdown-item:hover {
    color: var(--primary) !important;
    background: var(--hover-overlay) !important;
}

/* Fix Tailwind hover classes in navigation - light mode */
.hover\:bg-gray-100:hover {
    background-color: #f3f4f6 !important;
}

/* Fix Tailwind hover classes in navigation - dark mode */
html.dark .hover\:bg-gray-100:hover {
    background-color: rgba(148, 163, 184, 0.1) !important;
}

/* Ensure nav links have proper contrast in dark mode */
html.dark .nav-link-modern {
    color: var(--text-secondary) !important;
}

html.dark .nav-link-modern:hover {
    color: var(--text-primary) !important;
}

/* Fix mobile nav links in dark mode */
html.dark .mobile-nav-link {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border) !important;
}

html.dark .mobile-nav-link:hover {
    color: var(--primary) !important;
    background: var(--hover-overlay) !important;
}

/* Fix theme toggle visibility in dark mode */
html.dark .theme-toggle {
    color: var(--text-secondary) !important;
}

/* Fix dropdown dividers in dark mode */
html.dark .dropdown-divider {
    border-color: var(--border) !important;
}

/* ================================
   CALENDAR SECTION DARK MODE FIXES
   ================================ */


/* Fix calendar badge (white background with purple text) */
html.dark #events-section .bg-white\/80 {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: var(--border) !important;
}

html.dark #events-section .text-purple-700 {
    color: var(--primary) !important;
}

html.dark #events-section .border-purple-100 {
    border-color: var(--border) !important;
}

/* Fix calendar event cards (white tiles) */
html.dark .calendar-event-card {
    background: var(--surface) !important;
    border-color: var(--border) !important;
}

html.dark .calendar-event-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

/* Fix calendar date box */
html.dark .calendar-date-box {
    color: var(--text-primary) !important;
    border-color: var(--border) !important;
}

/* Fix calendar event time (purple text) */
html.dark .calendar-event-time {
    color: var(--primary) !important;
}

/* Fix calendar event titles */
html.dark .blog-card-title a {
    color: var(--text-primary) !important;
}

html.dark .blog-card-title a:hover {
    color: var(--primary) !important;
}

/* Fix calendar event descriptions */
html.dark .calendar-event-desc,
html.dark .blog-card-excerpt {
    color: var(--text-secondary) !important;
}

/* Fix calendar event location */
html.dark .calendar-event-location {
    color: var(--text-secondary) !important;
}

html.dark .calendar-event-location svg {
    color: var(--text-tertiary) !important;
}

/* Fix calendar section headings with text-black */
html.dark #events-section .text-black,
html.dark #events-section h2,
html.dark #events-section h3,
html.dark #events-section p {
    color: var(--text-primary) !important;
}

/* Fix calendar month divider lines */
html.dark #events-section .bg-gradient-to-r {
    background: linear-gradient(to right, var(--border), transparent) !important;
}

/* ================================
   BADGES & LABELS DARK MODE FIXES
   ================================ */

/* Fix all white/semi-transparent badges */
html.dark .bg-white\/80,
html.dark .bg-white\/90 {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

/* Fix badge borders - colored borders to neutral in dark mode */
html.dark .border-green-100,
html.dark .border-green-200,
html.dark .border-indigo-100,
html.dark .border-indigo-200,
html.dark .border-orange-100,
html.dark .border-orange-200,
html.dark .border-purple-100,
html.dark .border-purple-200,
html.dark .border-pink-100,
html.dark .border-pink-200,
html.dark .border-red-100,
html.dark .border-red-200,
html.dark .border-yellow-100,
html.dark .border-yellow-200,
html.dark .border-blue-100,
html.dark .border-blue-200 {
    border-color: var(--border) !important;
}

/* Fix badge text colors - keep them visible but softer */
html.dark .text-green-700,
html.dark .text-green-600 {
    color: #4ade80 !important;
}

html.dark .text-indigo-700,
html.dark .text-indigo-600 {
    color: #818cf8 !important;
}

html.dark .text-orange-700,
html.dark .text-orange-600 {
    color: #fb923c !important;
}

html.dark .text-purple-700,
html.dark .text-purple-600 {
    color: var(--primary) !important;
}

html.dark .text-red-700,
html.dark .text-red-600 {
    color: #f87171 !important;
}

html.dark .text-pink-700,
html.dark .text-pink-600 {
    color: #f472b6 !important;
}

/* ================================
   FOOTER DARK MODE
   ================================ */

html.dark .site-footer {
    background: var(--surface) !important;
}

html.dark .site-footer .text-black,
html.dark .site-footer a.text-black {
    color: var(--text-primary) !important;
}

html.dark .site-footer a:hover {
    color: var(--primary) !important;
}

html.dark .site-footer .border-gray-300,
html.dark .site-footer .border-t {
    border-color: var(--border) !important;
}

/* ================================
   SECTION BACKGROUNDS DARK MODE
   ================================ */

/* Fix sections with white background */
html.dark section.bg-white {
    background-color: var(--surface) !important;
}


/* ================================
   INLINE STYLES OVERRIDES FOR DARK MODE
   ================================ */

/* Fix blog card meta colors */
html.dark .blog-card-meta {
    color: var(--text-tertiary) !important;
}

/* Fix blog card category badges */
html.dark .blog-card-category {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    color: var(--text-inverse) !important;
}

/* Fix blog card titles */
html.dark .blog-card-title {
    color: var(--text-primary) !important;
}

html.dark .blog-card:hover .blog-card-title {
    color: var(--primary) !important;
}

/* Fix blog card excerpts */
html.dark .blog-card-excerpt {
    color: var(--text-secondary) !important;
}

/* Fix read-more buttons */
html.dark .read-more {
    background: linear-gradient(135deg, var(--primary), var(--primary-light)) !important;
    color: var(--text-inverse) !important;
}

html.dark section .read-more:hover {
    background: var(--primary-dark) !important;
    color: var(--text-inverse) !important;
    border-color: var(--primary-dark) !important;
}

/* Fix filter buttons */
html.dark .filter-btn {
    border-color: var(--primary) !important;
    background: var(--surface) !important;
    color: var(--primary) !important;
}

html.dark .filter-btn:hover {
    border-color: var(--primary) !important;
    background: var(--hover-overlay) !important;
}

html.dark .filter-btn.active {
    background: var(--primary) !important;
    color: var(--text-inverse) !important;
    border-color: var(--primary) !important;
}

/* Fix calendar inline styles (already added but ensuring specificity) */
html.dark .calendar-event-card {
    background: var(--surface) !important;
}

html.dark .calendar-date-box {
    color: var(--text-primary) !important;
}

html.dark .calendar-event-time {
    color: var(--primary) !important;
}

html.dark .calendar-event-desc {
    color: var(--text-secondary) !important;
}

html.dark .calendar-event-location {
    color: var(--text-secondary) !important;
}

/* Fix any remaining hardcoded black/dark colors in text */
html.dark [style*="color: #000"],
html.dark [style*="color: #0A2540"],
html.dark [style*="color: #1e293b"],
html.dark [style*="color: #1f2937"],
html.dark [style*="color: #374151"] {
    color: var(--text-primary) !important;
}

/* Fix any remaining hardcoded gray colors */
html.dark [style*="color: #64748b"],
html.dark [style*="color: #6b7280"] {
    color: var(--text-secondary) !important;
}

/* Fix any remaining hardcoded light gray colors */
html.dark [style*="color: #94a3b8"],
html.dark [style*="color: #9ca3af"],
html.dark [style*="color: #A3B0BD"] {
    color: var(--text-tertiary) !important;
}

/* Fix white backgrounds in inline styles */
html.dark [style*="background: white"],
html.dark [style*="background: #fff"],
html.dark [style*="background: #ffffff"] {
    background: var(--surface) !important;
}

/* Fix orange/accent colors in inline styles */
html.dark [style*="color: #ea580c"],
html.dark [style*="color: #6366f1"] {
    color: var(--primary) !important;
}

/* Fix orange backgrounds */
html.dark [style*="background: #ea580c"] {
    background: var(--primary) !important;
}

/* ================================
   BODY AND TEXT CLASSES DARK MODE
   ================================ */

/* CRITICAL FIX: Override body text-gray-900 class */
html.dark body,
html.dark body.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Override all Tailwind text-gray-* classes in dark mode */
html.dark .text-gray-50,
html.dark .text-gray-100,
html.dark .text-gray-200,
html.dark .text-gray-300 {
    color: var(--text-tertiary) !important;
}

html.dark .text-gray-400,
html.dark .text-gray-500 {
    color: var(--text-secondary) !important;
}

html.dark .text-gray-600,
html.dark .text-gray-700,
html.dark .text-gray-800,
html.dark .text-gray-900 {
    color: var(--text-primary) !important;
}

/* ================================
   WCAG ACCESSIBILITY IMPROVEMENTS
   ================================ */
@media (prefers-contrast: high) {
    :root {
        --text-primary: #000000;
        --text-secondary: #333333;
        --border: #000000;
        --focus-ring: #000000;
    }
    html.dark {
        --text-primary: #ffffff;
        --text-secondary: #cccccc;
        --border: #ffffff;
        --focus-ring: #ffffff;
    }
}
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    body {
        animation: none !important;
        background: var(--background) !important;
        background-size: auto !important;
    }
    html {
        scroll-behavior: auto;
    }
}
/* ================================
   BASE STYLES WITH WCAG COMPLIANCE
   ================================ */
* {
    font-family: var(--font-primary);
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
    width: 100%;
    scroll-behavior: smooth;
}
body {
    font-family: var(--font-primary);
    font-size: var(--text-base);
    margin: 0;
    padding: 0;
    line-height: var(--leading-relaxed);
    font-weight: 400;
    color: var(--text-primary);
    background: linear-gradient(135deg, #ffffff 0%, #FFCDB2 25%, rgba(255, 205, 178, 0.5) 50%, #ffffff 75%, #FFCDB2 100%) !important;
    background-size: 200% 200% !important;
    animation: bodyGradientShift 10s ease-in-out infinite !important;
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--text-primary);
    margin: 0 0 0.75em 0;
    letter-spacing: var(--tracking-tight);
}
h1 {
    font-weight: 800;
    font-size: clamp(var(--text-4xl), 8vw, var(--text-7xl));
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
}
h2 {
    font-weight: 700;
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    line-height: var(--leading-tight);
}
h3 {
    font-weight: 600;
    font-size: clamp(var(--text-xl), 4vw, var(--text-3xl));
    line-height: var(--leading-snug);
}
p {
    font-weight: 400;
    color: var(--text-secondary);
    margin: 0 0 1em 0;
}
a {
    color: var(--primary);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
    transition: all 0.2s ease;
}
a:hover {
    color: var(--primary-dark);
    text-decoration-thickness: 3px;
}
a:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: 2px;
}
button[class*="btn"] {
    text-decoration: none;
}
/* ================================
   LAYOUT HELPERS
   ================================ */
.section-padding {
    padding: 100px 0;
    width: 100%;
    overflow: hidden;
}
@media (max-width: 768px) {
    .section-padding {
        padding: 60px 0;
    }
}
.max-w-7xl {
    max-width: 1200px;
    width: 90vw;
}
.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--divider), transparent);
    margin: 0;
    width: 100%;
}
/* ================================
   ACCESSIBILITY UTILITIES
   ================================ */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary);
    color: var(--text-inverse);
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 8px;
    z-index: 10000;
    font-weight: 500;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 6px;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}
.focus-ring:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
.focus-ring-inset {
    outline: 2px solid var(--focus-ring);
    outline-offset: -2px;
}
/* ================================
   ENHANCED GRADIENTS
   ================================ */
.gradient-bg {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    position: relative;
    overflow: hidden;
    width: 100%;
    transition: background 0.3s ease;
}
.gradient-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top, rgba(229, 152, 155, 0.1) 0%, transparent 50%);
    z-index: 0;
    transition: background 0.3s ease;
}
html.dark .gradient-bg::before {
    background: radial-gradient(ellipse at top, rgba(109, 104, 117, 0.3) 0%, transparent 50%);
}
.gradient-bg > * {
    position: relative;
    z-index: 1;
}
/* ================================
   GRADIENT ANIMATIONS
   ================================ */
@keyframes bodyGradientShift {
    0% {
        background-position: 0% 0%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}
.gradient-overlay {
    position: relative;
    background: linear-gradient(135deg, rgba(248, 250, 252, 0.4) 0%, rgba(226, 232, 240, 0.3) 50%, rgba(241, 245, 249, 0.4) 100%);
}
html.dark .gradient-overlay {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.4) 0%, rgba(30, 41, 59, 0.3) 50%, rgba(51, 65, 85, 0.4) 100%);
}
.nav-gradient {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
}
html.dark .nav-gradient {
    background: rgba(10, 37, 64, 0.95) !important;
}
/* ================================
   THEME TRANSITION SYSTEM
   ================================ */
/* Apply transitions only to key layout elements, not all elements */
body,
.nav-container,
.site-footer,
.card,
.btn-primary,
.btn-secondary,
.btn-gradient,
.btn-outline-coral,
.dropdown-menu,
.mobile-menu-content,
.theme-toggle,
section,
article,
aside {
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease,
        box-shadow 0.3s ease;
}
/* Disable ALL transitions during theme switch to prevent flash */
.theme-transitioning,
.theme-transitioning * {
    transition: none !important;
}
/* ================================
   PERFORMANCE OPTIMIZATIONS
   ================================ */
.will-change {
    will-change: transform, opacity;
}
.grid {
    width: 100%;
    box-sizing: border-box;
}
.flex {
    box-sizing: border-box;
    min-width: 0;
}
.container,
.max-w-7xl,
section,
div {
    max-width: 100%;
    box-sizing: border-box;
}
/* ================================
   MODERN BUTTON STYLES
   ================================ */
.btn-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 12px 32px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(254, 166, 137, 0.3);
}
.btn-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(254, 166, 137, 0.4);
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}
.btn-outline-coral {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: var(--surface);
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.btn-outline-coral:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(254, 166, 137, 0.3);
}
/* ================================
   ENHANCED FORM ELEMENTS
   ================================ */
input, textarea, select, button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}
/* ================================
   HIGH CONTRAST MODE
   ================================ */
@media (prefers-contrast: high) {
    .gradient-bg {
        background: var(--background);
    }
    .gradient-bg::before {
        display: none;
    }
    .card {
        border: 2px solid var(--border);
    }
}

/* ================================
   PRINT STYLES
   ================================ */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    .skip-link,
    .mobile-menu,
    .theme-toggle {
        display: none !important;
    }
}