/* ============================================
   ORGANIC & EARTHY THEME - "Slow Life" Vibe
   Kiedy Smieci - Main Application Styles
   ============================================ */

/* CSS Variables - Light Mode (scentralizowane) */
:root {
    /* Background colors */
    --bg-primary: #F9F7F2;
    --bg-secondary: #F5F0E8;
    --bg-card: #FFFFFF;
    --bg-card-hover: #FDFCFA;

    /* Primary colors */
    --color-primary: #2E7D32;
    --color-primary-light: #4CAF50;
    --color-primary-dark: #1B5E20;
    --color-secondary: #8D6E63;
    --color-secondary-light: #A1887F;
    --color-accent: #5D4037;

    /* Text colors */
    --text-primary: #37474F;
    --text-secondary: #607D8B;
    --text-muted: #90A4AE;

    /* Borders and shadows */
    --border-color: #EBE4D8;
    --shadow-color: rgba(46, 125, 50, 0.08);

    /* Organic theme aliases (dla kompatybilności) */
    --organic-green: #2E7D32;
    --organic-green-light: #4CAF50;
    --organic-brown: #8D6E63;
    --organic-brown-light: #A1887F;
    --organic-cream: #F9F7F2;
    --organic-graphite: #37474F;

    /* Status colors */
    --organic-success: #66BB6A;
    --organic-warning: #FFB74D;
    --organic-error: #E57373;
    --organic-info: #4FC3F7;

    /* Waste type colors (scentralizowane dla spójności) */
    --waste-mixed-bg: #455A64;
    --waste-mixed-text: white;
    --waste-plastic-bg: #FBC02D;
    --waste-plastic-text: #1A1A1A;
    --waste-paper-bg: #42A5F5;
    --waste-paper-text: white;
    --waste-glass-bg: #66BB6A;
    --waste-glass-text: white;
    --waste-bio-bg: #8D6E63;
    --waste-bio-text: white;
    --waste-large-bg: #9333ea;
    --waste-large-text: white;
    --waste-textile-bg: #f97316;
    --waste-textile-text: white;

    /* Spacing scale (dla konsystencji) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border radius scale */
    --radius-sm: 0.5rem;
    --radius-md: 1rem;
    --radius-lg: 1.5rem;
    --radius-xl: 2rem;
}

/* CSS Variables - Dark Mode (WCAG AA contrast ratios) */
.dark {
    --bg-primary: #1A2E1A;
    --bg-secondary: #243324;
    --bg-card: #2D3F2D;
    --bg-card-hover: #354535;

    --color-primary: #66BB6A;
    --color-primary-light: #81C784;
    --color-primary-dark: #4CAF50;
    --color-secondary: #A1887F;
    --color-secondary-light: #BCAAA4;
    --color-accent: #D7CCC8;

    /* Text colors - improved contrast (WCAG AA 4.5:1 ratio) */
    --text-primary: #F5F5F0;
    --text-secondary: #E8F5E9; /* Was #C8E6C9 - now lighter for better contrast */
    --text-muted: #A5D6A7;      /* Was #81C784 - now lighter for readability */

    --border-color: #3D5A3D;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Auto Dark Mode - respects system preference (WCAG 2.1 AAA) */
@media (prefers-color-scheme: dark) {
    :root:not(.light) {
        --bg-primary: #1A2E1A;
        --bg-secondary: #243324;
        --bg-card: #2D3F2D;
        --bg-card-hover: #354535;
        --color-primary: #66BB6A;
        --color-primary-light: #81C784;
        --color-primary-dark: #4CAF50;
        --color-secondary: #A1887F;
        --color-secondary-light: #BCAAA4;
        --color-accent: #D7CCC8;
        --text-primary: #F5F5F0;
        --text-secondary: #E8F5E9;
        --text-muted: #A5D6A7;
        --border-color: #3D5A3D;
        --shadow-color: rgba(0, 0, 0, 0.3);
    }
}

/* Base Typography - Nunito for organic feel */
body {
    font-family: 'Nunito', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Kolory odpadów - używają CSS variables dla spójności */
.waste-mixed { background: var(--waste-mixed-bg); color: var(--waste-mixed-text); }
.waste-plastic { background: var(--waste-plastic-bg); color: var(--waste-plastic-text); } /* WCAG AA: contrast 10.5:1 */
.waste-paper { background: var(--waste-paper-bg); color: var(--waste-paper-text); }
.waste-glass { background: var(--waste-glass-bg); color: var(--waste-glass-text); }
.waste-bio { background: var(--waste-bio-bg); color: var(--waste-bio-text); }
.waste-large { background: var(--waste-large-bg); color: var(--waste-large-text); }
.waste-textile { background: var(--waste-textile-bg); color: var(--waste-textile-text); }

/* Kolory odpadów - Dark mode (jaśniejsze dla lepszego kontrastu) */
.dark .waste-mixed { --waste-mixed-bg: #546E7A; }
.dark .waste-plastic { --waste-plastic-bg: #FFCA28; }
.dark .waste-paper { --waste-paper-bg: #64B5F6; }
.dark .waste-glass { --waste-glass-bg: #81C784; }
.dark .waste-bio { --waste-bio-bg: #A1887F; }
.dark .waste-large { --waste-large-bg: #AB47BC; }
.dark .waste-textile { --waste-textile-bg: #FF8A65; }

/* Earth Colors - Dark Mode Support (WCAG AA 4.5:1 contrast) */
/* These override Tailwind earth-* colors in dark mode for better readability */
.dark .text-earth-100 { color: #E8F5E9 !important; } /* Very light green for dark bg */
.dark .text-earth-200 { color: #C8E6C9 !important; }
.dark .text-earth-300 { color: #A5D6A7 !important; } /* Light muted green */
.dark .text-earth-400 { color: #81C784 !important; } /* Medium green - good contrast */
.dark .text-earth-500 { color: #66BB6A !important; } /* Accent green */

/* Animacje */
@keyframes blob {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes drive { 0% { left: -100px; } 100% { left: 120%; } }
@keyframes run { 0% { left: -200px; } 100% { left: 110%; } }

.animate-blob { animation: blob 7s infinite; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.animate-drive { animation: drive 6s linear infinite; }
.animate-run { animation: run 6s linear infinite; }

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .animate-blob, .animate-drive, .animate-run { animation: none; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Apple 2026 HIG - Safe Areas */
.pt-safe-top { padding-top: env(safe-area-inset-top, 0px); }
.pb-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.pl-safe-left { padding-left: env(safe-area-inset-left, 0px); }
.pr-safe-right { padding-right: env(safe-area-inset-right, 0px); }
.m-safe { margin: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

/* Apple 2026 HIG - Touch Targets (min 44x44 points) */
button, a, [role="button"], .touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Apple 2026 HIG - Tap highlight */
button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Apple 2026 HIG - Active states with scale */
button:active, a:active, [role="button"]:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
}

/* Organic Card Style - Soft, floating, paper-like */
.ios-card, .organic-card {
    border-radius: 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px -2px var(--shadow-color);
    transition: all 0.3s ease;
}
.ios-card:hover, .organic-card:hover {
    box-shadow: 0 8px 30px -4px var(--shadow-color);
    transform: translateY(-2px);
}
.dark .ios-card, .dark .organic-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}

/* Apple 2026 HIG - Vibrancy effects */
.ios-blur {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

/* NOTE: Organic System Colors zostały przeniesione do głównego :root na początku pliku */

/* Scrollbar - minimal iOS style */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); }

/* Print - rozszerzone style druku */
@media print {
    /* Podstawowe kontrolki */
    .print-color-exact { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .no-print { display: none !important; }

    /* Ukryj elementy UI */
    header, nav, footer,
    .sidebar, .mobile-nav,
    .nav-blur, .skip-link,
    .install-prompt, .pwa-badge,
    button:not(.print-show),
    .animate-blob { display: none !important; }

    /* Reset kolorów na druk */
    body {
        background: white !important;
        color: black !important;
    }

    /* Linki - pokaż URL */
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }

    /* Strona */
    @page {
        margin: 1.5cm;
        size: A4;
    }

    /* Zapobiegnij łamaniu wewnątrz elementów */
    .calendar-day, .card, .section {
        break-inside: avoid;
    }
}

/* Calendar day - Apple 2026 touch targets */
.calendar-day { min-height: 50px; }
@media (min-width: 640px) { .calendar-day { min-height: 70px; } }

/* Apple 2026 HIG - Prevent text selection on interactive elements */
button, .no-select {
    -webkit-user-select: none;
    user-select: none;
}

/* Apple 2026 HIG - Smooth scrolling */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Apple 2026 HIG - Pull-to-refresh prevention in PWA */
body {
    overscroll-behavior-y: contain;
}

/* Apple 2026 HIG - Dynamic Island awareness (iPhone 14 Pro+) */
@supports (padding-top: env(safe-area-inset-top)) {
    .dynamic-island-aware {
        padding-top: max(env(safe-area-inset-top), 59px);
    }
}

/* Apple 2026 HIG - Large title animation */
.large-title {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.1;
}
@media (max-width: 768px) {
    .large-title { font-size: 28px; letter-spacing: -0.3px; }
}
@media (max-width: 640px) {
    .large-title { font-size: 24px; letter-spacing: -0.2px; }
}

/* Organic Navigation bar */
.nav-blur {
    background: rgba(249, 247, 242, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--border-color);
}
.dark .nav-blur {
    /* Fallback for older browsers */
    background: rgba(26, 46, 26, 0.95);
    /* Modern browsers: uses CSS variable with transparency */
    background: color-mix(in srgb, var(--bg-primary) 95%, transparent);
    border-bottom-color: var(--border-color);
}

/* Language Selector - Organic Style */
.language-selector {
    display: flex;
    gap: 6px;
}
.lang-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 1rem;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: var(--bg-card);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}
.dark .lang-btn {
    background: var(--bg-card);
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.lang-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
    border-color: var(--color-primary);
}
.dark .lang-btn:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}
.lang-btn.active {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}
.dark .lang-btn.active {
    background: var(--color-primary);
    color: white;
}

/* Skip link - Accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 0 0 1rem 1rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 9999;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 0;
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

/* Focus-visible dla wszystkich interaktywnych elementów - WCAG AA */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Organic Button Styles */
.btn-organic {
    background: var(--color-primary);
    color: white;
    border-radius: 1rem;
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.25);
}
.btn-organic:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
}
.btn-organic-secondary {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}
.btn-organic-secondary:hover {
    background: var(--bg-secondary);
    border-color: var(--color-primary);
}

/* PWA Safe Area - inline style fallback */
.pt-safe-top-fixed {
    padding-top: calc(env(safe-area-inset-top) + 52px) !important;
}

/* CRITICAL: iOS zoom prevention - font-size 16px for mobile inputs */
/* iOS Safari zooms in on inputs with font-size < 16px */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }
}