/* ============================================
   BASE - variables, reset, layout de baza
   ============================================ */

:root {
    --grass-light: #7cc576;
    --grass: #4caf50;
    --grass-dark: #2e7d32;
    --grass-darker: #1b5e20;
    --sky-top: #87ceeb;
    --sky-bot: #b9e2f5;
    --sun: #ffd54f;
    --ink: #1a2e1a;
    --muted: #5a6b5a;

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 28px;
    --radius-pill: 100px;

    --shadow-sm: 0 2px 8px rgba(27, 94, 32, 0.08);
    --shadow-md: 0 10px 30px rgba(27, 94, 32, 0.12);
    --shadow-lg: 0 20px 60px rgba(27, 94, 32, 0.15);

    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-text-size-adjust: 100%; /* previne zoom auto pe iOS landscape */
}

html, body {
    min-height: 100vh;
    /* fallback pentru mobil - 100vh pe iOS include bara URL */
    min-height: 100dvh;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: linear-gradient(180deg,
        var(--sky-top) 0%,
        var(--sky-bot) 50%,
        #c5e8a4 75%,
        var(--grass-light) 100%);
    background-attachment: fixed;
    position: relative;
    padding-bottom: 200px;
}

.container {
    position: relative;
    z-index: 10;
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 16px 32px;
    padding-top: calc(40px + env(safe-area-inset-top));
}

@media (min-width: 640px) {
    .container { padding: 60px 20px 40px; }
    body { padding-bottom: 220px; }
}

/* Accesibilitate - reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}