:root{
    /* colors */
    --bg: #ffffff;
    --text: #242121;                  /* rgb(36,33,33) */
    --primary-color: #242121;                  /* rgb(36,33,33) */
    --text-muted: rgba(36,33,33,.65);
    --secondary-color: #5E1521;                 /* rgb(94,21,33) */
    --secondary-color-hover: #741c2b;

    --slider-arrow-color: #374151;   /* gray 700 */
    --slider-arrow-hover: #111827;

    --modal-close-color: #374151;
    --modal-close-hover: #111827;

    --border: rgba(36,33,33,.10);
    --card: rgba(36,33,33,.03);
    --shadow: 0 18px 40px rgba(36,33,33,.10);

    /* layout */
    --radius: 14px;
    --container: 1800px;
    --gutter: 20px;

    /* NAV: jedno źródło prawdy */
    --nav-h: 64px;
    --topbar-h: var(--nav-h);

    /* typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --fs-1: clamp(2.2rem, 4vw, 3.5rem);
    --fs-2: clamp(1.4rem, 2vw, 1.8rem);
    --fs-3: clamp(1rem, 1.2vw, 1.1rem);
    --fs-4: 0.95rem;

    /* spacing */
    --space-1: 8px;
    --space-2: 12px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 48px;
    --space-6: 64px;

    --loader-bg: #fff;
    --loader-fg: var(--secondary-color);
    --loader-size: 44px;
    --loader-ring: 4px;
    --loader-z: 9999;
}

@media (prefers-color-scheme: light){
    :root{
        --bg:#ffffff;
        --fg:#0b0c0f;
        --muted: rgba(11,12,15,.72);
        --card: rgba(11,12,15,.04);
        --border: rgba(11,12,15,.10);
    }
}

/* tablet */
@media (min-width: 600px){
    :root{
        --gutter: 18px;
    }
}

/* desktop */
@media (min-width: 900px){
    :root{
        --gutter: 22px;
    }
}

/* duży desktop */
@media (min-width: 1200px){
    :root{
        --gutter: 26px;
    }
}

/* ultra-wide */
@media (min-width: 1600px){
    :root{
        --container: 2400px;
        --gutter: 32px;
    }
}