/* ==========================================================================
   CSS Custom Properties — PERNAL P.S.A.
   Paleta kolorów, typografia, spacing, cienie, border-radius
   ========================================================================== */

:root {
    /* --- Kolory marki --- */
    --color-primary:        #1B3A5C;
    --color-primary-light:  #3A6B9F;
    --color-primary-dark:   #122840;
    --color-accent:         #4DB89A;
    --color-accent-light:   #6DD4B5;
    --color-accent-dark:    #2E8A72;

    /* --- Energia / Słońce --- */
    --color-energy:         #E8A838;
    --color-energy-light:   #F2C05C;
    --color-energy-warm:    #D4853A;

    /* --- Tła (pastelowy, ciepły ton) --- */
    --color-bg:             #FAFBFD;
    --color-bg-alt:         #F2F4F8;
    --color-surface:        #FFFFFF;

    /* --- Tekst (nieco lżejszy) --- */
    --color-text:           #2B3A4C;
    --color-text-secondary: #6B7D8F;
    --color-text-light:     #96A5B6;
    --color-text-inverse:   #FFFFFF;

    /* --- Obramowania (pastelowe) --- */
    --color-border:         #E6EAF0;
    --color-border-light:   #F0F3F7;

    /* --- Stany --- */
    --color-success:        #2E8A72;
    --color-error:          #C0392B;

    /* --- Typografia --- */
    --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-size-xs:         0.75rem;
    --font-size-sm:         0.875rem;
    --font-size-base:       1rem;
    --font-size-md:         1.125rem;
    --font-size-lg:         1.25rem;
    --font-size-xl:         1.5rem;

    /* --- Spacing (8px grid) --- */
    --space-1:              0.25rem;   /* 4px */
    --space-2:              0.5rem;    /* 8px */
    --space-3:              0.75rem;   /* 12px */
    --space-4:              1rem;      /* 16px */
    --space-5:              1.5rem;    /* 24px */
    --space-6:              2rem;      /* 32px */
    --space-7:              2.5rem;    /* 40px */
    --space-8:              3rem;      /* 48px */
    --space-9:              4rem;      /* 64px */
    --space-10:             5rem;      /* 80px */
    --space-11:             6rem;      /* 96px */
    --space-12:             8rem;      /* 128px */

    /* --- Border radius --- */
    --radius-sm:            6px;
    --radius-md:            12px;
    --radius-lg:            20px;
    --radius-full:          9999px;

    /* --- Cienie (pastelowe, delikatniejsze) --- */
    --shadow-sm:            0 1px 3px rgba(27, 58, 92, 0.04);
    --shadow-md:            0 4px 14px rgba(27, 58, 92, 0.06);
    --shadow-lg:            0 8px 30px rgba(27, 58, 92, 0.07);
    --shadow-xl:            0 20px 60px rgba(27, 58, 92, 0.09);

    /* --- Przejścia --- */
    --transition-fast:      0.15s ease;
    --transition-base:      0.25s ease;
    --transition-slow:      0.4s ease;

    /* --- Szerokość kontenera --- */
    --container-max:        1200px;
    --container-narrow:     800px;
    --container-padding:    1.5rem;
}

/* Ciemniejsze tło dla sekcji co drugiej */
@media (prefers-color-scheme: dark) {
    /* Placeholder na przyszłość — dark mode */
}