/* === DESIGN TOKENS — redesign 2026 === */
:root {
    /* --- Kolory --- */
    --c-bg:               #fcf8ff;
    --c-surface:          #fcf8ff;
    --c-surface-low:      #f5f2ff;
    --c-surface-container:#efecff;
    --c-surface-white:    #ffffff;
    --c-outline:          #827560;
    --c-outline-variant:  #d4c4ac;

    --c-text:             #1a1a2e;
    --c-text-muted:       #504533;
    --c-text-light:       #6b5f51;   /* przyciemniony dla WCAG 1.4.3 — kontrast 4.6:1 na #fcf8ff */

    --c-primary:          #7b5800;   /* brąz — linki, ikony aktywne */
    --c-primary-cta:      #f8b719;   /* żółty — tło CTA */
    --c-primary-cta-dk:   #684a00;   /* tekst na żółtym tle */
    --c-primary-fixed:    #ffdea5;   /* jasny żółty bg */
    --c-primary-fixed-dim:#fdbb1f;

    --c-secondary:        #42617e;   /* granat — logo, nav */
    --c-secondary-cont:   #bdddff;

    --c-dark:             #1a1a2e;   /* bardzo ciemny — footer bg, btn--dark */
    --c-on-bg:            #1a1a2e;   /* alias dla c-dark — tekst na białym tle */
    --c-white:            #ffffff;

    --c-error:            #ba1a1a;
    --c-success-bg:       #e8f5e9;
    --c-success-text:     #1b5e20;

    /* --- Typografia --- */
    --font-heading:  'Dongle', sans-serif;
    --font-display:  'Dongle', sans-serif;   /* alias */
    --font-body:     'Readex Pro', sans-serif;

    /* --- Skala typograficzna --- */
    --text-display:     clamp(3.5rem, 8vw, 7.5rem);
    --lh-display:       0.9;

    --text-headline-lg: clamp(2.8rem, 5vw, 3.5rem);
    --lh-headline-lg:   0.95;

    --text-headline-md: clamp(2rem, 3.5vw, 2.625rem);
    --lh-headline-md:   0.95;

    --text-headline-sm: 2rem;
    --lh-headline-sm:   1;

    --text-body-lg:     1.125rem;  /* 18px */
    --lh-body-lg:       1.55;

    --text-body-md:     1rem;
    --lh-body-md:       1.5;

    --text-label-lg:    0.875rem;
    --lh-label-lg:      1.43;
    --ls-label-lg:      0.02em;

    --text-label-sm:    0.75rem;
    --lh-label-sm:      1.33;
    --ls-label-sm:      0.05em;

    /* --- Layout --- */
    --max-width:         1280px;
    --gutter-mobile:     20px;
    --gutter-desktop:    64px;
    --gutter:            24px;
    --section-gap:       96px;

    /* --- Misc --- */
    --radius:            4px;
    --radius-lg:         12px;
    --radius-xl:         16px;
    --radius-full:       9999px;
    --shadow-sm:         0 2px 8px rgba(0,0,0,0.05);
    --shadow-card:       0 20px 40px -10px rgba(0,40,66,0.05);
    --shadow-md:         0 8px 28px rgba(0,40,66,0.12);
    --transition:        0.2s ease;

    /* Header height — do sticky positioning */
    --header-h:          68px;
}

/* === RESET === */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Nie resetuj pseudo-elementów pluginów ikonowych */
[class*="wlr"]::before,
[class*="wlr"]::after,
[class*="wll"]::before,
[class*="wll"]::after {
    margin: revert;
    padding: revert;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body-md);
    line-height: var(--lh-body-md);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, video, svg {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

ul, ol { list-style: none; }

p { margin-bottom: 1rem; }
p:last-child { margin-bottom: 0; }

table { border-collapse: collapse; width: 100%; }

/* === TYPOGRAFIA === */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--c-text);
    line-height: 1.1;
    margin-bottom: 0.5rem;
}

/* === UTILITIES === */
.screen-reader-text {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

.limit-wrapper {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--gutter-mobile);
}

@media (min-width: 768px) {
    .limit-wrapper { padding: 0 var(--gutter-desktop); }
}

.section-title {
    font-family: var(--font-heading);
    font-size: var(--text-headline-lg);
    line-height: var(--lh-headline-lg);
    color: var(--c-text);
    margin-bottom: 40px;
}

.section-title--center { text-align: center; }

/* === SKIP LINK === */
.skip-link:focus {
    position: fixed;
    top: 0; left: 0;
    width: auto; height: auto;
    clip: auto;
    background: var(--c-primary-cta);
    color: var(--c-primary-cta-dk);
    padding: 8px 16px;
    z-index: 9999;
    font-weight: 700;
}

/* ==============================
   WCAG — dostępność cyfrowa
   ============================== */

/* Fokus widoczny dla wszystkich elementów interaktywnych */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--c-primary-cta);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Usuń outline tylko dla użytkowników myszy (nie klawiatury) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
[tabindex]:focus:not(:focus-visible) {
    outline: none;
}

/* Zwiększ kontrast obszaru fokusu na ciemnym tle */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
    outline-color: #fff;
}

/* Elementy dekoracyjne niewidoczne dla czytników ekranu */
svg[aria-hidden="true"] { pointer-events: none; }

/* Powiększony tekst — nie blokuj skalowania */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--left,
    .reveal--right {
        opacity: 1;
        transform: none;
        transition: none;
    }
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==============================
   Preloader
   ============================== */
#mtd-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    transition: opacity .45s ease, visibility .45s ease;
}
#mtd-preloader.mtd-preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.mtd-preloader__paw {
    animation: mtd-paw-bounce .7s ease-in-out infinite alternate;
    filter: drop-shadow(0 8px 24px rgba(248,177,26,.5));
    display: flex;
}
.mtd-preloader__label {
    font-family: var(--font-display);
    font-size: 2.2rem;
    color: var(--c-secondary);
    letter-spacing: .08em;
    text-transform: uppercase;
    animation: mtd-label-fade 1.4s ease-in-out infinite;
}
.mtd-preloader__dots {
    display: flex;
    gap: .5rem;
}
.mtd-preloader__dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-outline-variant);
    animation: mtd-dot-pulse 1.2s ease-in-out infinite;
}
.mtd-preloader__dots span:nth-child(2) { animation-delay: .2s; }
.mtd-preloader__dots span:nth-child(3) { animation-delay: .4s; }

@keyframes mtd-paw-bounce {
    0%   { transform: translateY(0)     scale(1); }
    100% { transform: translateY(-14px) scale(1.1); }
}
@keyframes mtd-label-fade {
    0%, 100% { opacity: .5; }
    50%       { opacity: 1; }
}
@keyframes mtd-dot-pulse {
    0%, 100% { background: var(--c-outline-variant); transform: scale(1); }
    50%       { background: var(--c-primary-cta);    transform: scale(1.4); }
}
@media (prefers-reduced-motion: reduce) {
    .mtd-preloader__paw,
    .mtd-preloader__label,
    .mtd-preloader__dots span { animation: none; }
}

/* ==============================
   Scroll reveal
   ============================== */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Wariant — wejście z lewej (obraz hero) */
.reveal--left {
    transform: translateX(-32px);
}
.reveal--left.is-revealed {
    transform: translateX(0);
}

/* Wariant — wejście z prawej */
.reveal--right {
    transform: translateX(32px);
}
.reveal--right.is-revealed {
    transform: translateX(0);
}

/* Szanuj preferencje użytkownika */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal--left,
    .reveal--right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}