/**
 * Design Tokens – Fala 1 (index + global)
 * Jeden źródłowy zestaw tokenów dla spójności wizualnej i łatwej zmiany skali.
 * Filozofia: 8px grid, płynna typografia (clamp), ograniczona liczba poziomów cieni/radiusów.
 */

:root {
    /* ----- Kolory (marka B3) ----- */
    --primary: #064F3D;
    --primary-dark: #0B1A17;
    --primary-light: #3a9b85;
    --secondary: #ffffff;
    --secondary-light: #f8f9fa;
    --accent: #f8f9fa;
    --accent-dark: #e9ecef;
    --text-dark: #0B1A17;
    --text-light: #ffffff;
    --text-muted: #4a5568;
    --text-accent: #2d3748;
    --gray-light: #f8f9fa;
    --gray: #e9ecef;
    --gray-dark: #495057;
    --success: #267764;
    --warning: #ffc107;
    --danger: #dc3545;
    --info: #17a2b8;

    /* ----- Siatka 8px ----- */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */

    /* ----- Sekcje: spójny rytm pionowy ----- */
    --section-pt: clamp(2.5rem, 8vw, 4rem);
    --section-pb: clamp(2.5rem, 8vw, 4rem);
    --section-pt-sm: clamp(1.5rem, 5vw, 2.5rem);
    --section-pb-sm: clamp(1.5rem, 5vw, 2.5rem);
    --section-pt-lg: clamp(4rem, 10vw, 6.25rem);
    --section-pb-lg: clamp(4rem, 10vw, 6.25rem);

    /* ----- Typografia (clamp: min, prefer, max) ----- */
    --font-display: clamp(2rem, 5vw + 1rem, 3rem);
    --font-h1: clamp(1.75rem, 4vw + 0.5rem, 2.5rem);
    --font-h2: clamp(1.5rem, 3.5vw + 0.5rem, 2.25rem);
    --font-h3: clamp(1.25rem, 3vw + 0.25rem, 1.5rem);
    --font-h4: clamp(1.125rem, 2vw + 0.25rem, 1.25rem);
    --font-body: clamp(1rem, 2vw, 1.0625rem);
    --font-small: clamp(0.875rem, 1.5vw, 0.9375rem);
    --font-caption: clamp(0.75rem, 1.2vw, 0.8125rem);
    --line-tight: 1.2;
    --line-normal: 1.5;
    --line-relaxed: 1.6;
    --measure: min(65ch, 90vw);

    /* ----- Radius (3 poziomy) ----- */
    --radius-sm: 0.25rem;   /* 4px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    /* Zachowanie kompatybilności z istniejącym kodem */
    --border-radius: var(--radius-md);
    --border-radius-lg: var(--radius-lg);

    /* ----- Cienie (3 poziomy, subtelne) ----- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.15);

    /* ----- Motion ----- */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast: 180ms;
    --duration-normal: 280ms;
    --duration-slow: 400ms;
    --transition-base: color var(--duration-normal) var(--ease-out),
        background-color var(--duration-normal) var(--ease-out),
        border-color var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
    --transition: all var(--duration-normal) var(--ease-out);

    /* ----- Gradienty (bez agresywnych efektów) ----- */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #1a3d35 100%);
    --gradient-secondary: linear-gradient(135deg, #1a3d35 0%, #2d4a42 100%);
    --gradient-black: linear-gradient(180deg, var(--primary-dark) 0%, #1a2f2a 100%);

    /* ----- Breakpointy (wartości do @media – używaj min-width mobile-first) ----- */
    /* 480px, 768px, 1024px, 1280px, 1440px */
    --bp-sm: 30em;    /* 480px */
    --bp-md: 48em;    /* 768px */
    --bp-lg: 64em;    /* 1024px */
    --bp-xl: 80em;    /* 1280px */
    --bp-2xl: 90em;   /* 1440px */

    /* ----- Obrazy ----- */
    --img-ratio-hero: 4 / 3;
    --img-ratio-card: 3 / 4;
    --img-radius: var(--radius-lg);
    --img-radius-sm: var(--radius-md);

    /* ----- Kontener ----- */
    --container-max: min(1320px, 100%);
    --container-padding: clamp(1rem, 4vw, 2rem);

    /* ----- Navbar / Topbar (zgodne z topbar.css) ----- */
    --navbar-h: clamp(60px, 8vw, 80px);
    --topbar-h: 44px;
}