/* ==========================================================================
   Stasacucine — base.css
   Fundament designu: tokeny, reset, typografia, przyciski, formularze, dialogi.
   Ładowany na KAŻDEJ stronie (index, polityka, cookies, regulamin, kalendarz).

   Język designu: głęboka czerń + szampański akcent (jeden akcent, jedna skala
   szarości). Wszystkie kolory żyją TYLKO tutaj, jako zmienne — w pozostałych
   plikach nie ma ani jednego literału koloru poza rgb(0 0 0 / x) dla cieni.
   ========================================================================== */

/* UWAGA: Font Awesome (CDN) jest bez warstwy, więc wygrywa z każdą regułą z @layer.
   Nie ustawiaj display/line-height wprost na <i class="fa…"> — owiń ikonę w <span>. */
@layer reset, tokens, base, components;

/* --- Fonty (self-hosted: bez Google Fonts = zero wycieku IP, szybciej, CSP) --- */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/montserrat-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   TOKENS
   ========================================================================== */
@layer tokens {
    :root {
        color-scheme: dark;

        /* Neutrals (ciepła czerń) */
        --ink-950: #0a0a0b;
        --ink-900: #111113;
        --ink-850: #17171a;
        --ink-800: #1e1e22;
        --ink-700: #2a2a30;
        --ink-600: #3a3a42;

        /* Tekst */
        --text: #f5f2e8;
        --text-2: rgb(245 242 232 / 0.74);
        --text-3: rgb(245 242 232 / 0.52);

        /* Akcent (szampan) */
        --accent-hi: #efe7cc;
        --accent: #c8b88a;
        --accent-lo: #a89968;
        --on-accent: #16140f;
        --accent-soft: rgb(200 184 138 / 0.12);
        --accent-line: rgb(200 184 138 / 0.38);

        /* Semantyka */
        --ok: #4cc38a;
        --err: #f2766b;
        --err-soft: rgb(242 118 107 / 0.12);

        /* Powierzchnie i linie */
        --bg: var(--ink-900);
        --bg-deep: var(--ink-950);
        --surface: var(--ink-850);
        --surface-2: var(--ink-800);
        --surface-3: var(--ink-700);
        --line: rgb(255 255 255 / 0.09);
        --line-strong: rgb(255 255 255 / 0.18);
        --scrim: rgb(6 6 7 / 0.74);

        /* Typografia */
        --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
        --fs-xs: 0.8125rem;
        --fs-sm: 0.9375rem;
        --fs-md: 1rem;
        --fs-lg: clamp(1.05rem, 1rem + 0.25vw, 1.2rem);
        --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.4rem);
        --fs-h2: clamp(1.85rem, 1.25rem + 2.4vw, 3rem);
        --fs-h1: clamp(2rem, 1rem + 4.4vw, 4.25rem);

        /* Geometria */
        --r-sm: 8px;
        --r-md: 14px;
        --r-lg: 22px;
        --r-xl: 30px;
        --r-pill: 999px;
        --container: 1200px;
        --gutter: clamp(1rem, 4vw, 2rem);
        --section-y: clamp(4rem, 3rem + 5vw, 7.5rem);
        --header-h: 76px;

        /* Cienie i ruch */
        --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4), 0 8px 24px rgb(0 0 0 / 0.28);
        --shadow-2: 0 2px 4px rgb(0 0 0 / 0.4), 0 20px 50px rgb(0 0 0 / 0.42);
        --glow: 0 0 0 1px var(--accent-line), 0 10px 40px rgb(200 184 138 / 0.14);
        --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
        --dur: 0.25s;

        /* Warstwy */
        --z-nav: 100;
        --z-fab: 90;
        --z-banner: 110;
        --z-toast: 300;

        @media (max-width: 899.98px) {
            --header-h: 64px;
        }
    }
}

/* ==========================================================================
   RESET
   ========================================================================== */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    * { margin: 0; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body { min-height: 100dvh; }
    img, picture, video, svg { display: block; max-width: 100%; }
    img, video { height: auto; }
    input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
    button { background: none; border: 0; padding: 0; cursor: pointer; }
    a { color: inherit; }
    ul[role="list"], ol[role="list"], ul.plain, ol.plain { list-style: none; padding: 0; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    [hidden] { display: none !important; }
    table { border-collapse: collapse; }
}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
    html {
        scroll-behavior: smooth;
        scroll-padding-top: calc(var(--header-h) + 1rem);
        scrollbar-gutter: stable;
        scrollbar-color: var(--ink-600) var(--bg-deep);
    }
    body {
        font-family: var(--font);
        font-size: var(--fs-md);
        font-weight: 400;
        line-height: 1.65;
        color: var(--text);
        background: var(--bg);
        overflow-x: clip;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    h1, h2, h3, h4 {
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -0.02em;
        text-wrap: balance;
    }
    p { text-wrap: pretty; }
    ::selection { background: var(--accent); color: var(--on-accent); }
    :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: var(--r-sm); }
    :focus:not(:focus-visible) { outline: none; }
    a { text-decoration-color: var(--accent-line); text-underline-offset: 0.2em; }
    a:hover { text-decoration-color: currentColor; }
    strong { font-weight: 600; }

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

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {

    /* --- Układ --- */
    .container {
        width: min(100% - 2 * var(--gutter), var(--container));
        margin-inline: auto;
    }
    .section { padding-block: var(--section-y); position: relative; }
    .section--alt { background: var(--bg-deep); }

    .section-head {
        max-width: 46rem;
        margin: 0 auto clamp(2rem, 4vw, 3.5rem);
        text-align: center;
    }
    .section-title { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.03em; }
    .section-subtitle { margin-top: 1rem; font-size: var(--fs-lg); color: var(--text-2); }
    .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 1.1rem;
        padding: 0.35rem 0.95rem;
        border: 1px solid var(--accent-line);
        border-radius: var(--r-pill);
        background: var(--accent-soft);
        color: var(--accent-hi);
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* --- Przyciski --- */
    .btn {
        --btn-bg: var(--surface-3);
        --btn-fg: var(--text);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.65rem;
        min-height: 3rem;
        padding: 0.8rem 1.6rem;
        border: 1px solid transparent;
        border-radius: var(--r-pill);
        background: var(--btn-bg);
        color: var(--btn-fg);
        font-size: var(--fs-sm);
        font-weight: 600;
        letter-spacing: 0.02em;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
                    background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    .btn:hover { transform: translateY(-2px); }
    .btn:active { transform: translateY(0); }
    .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }

    .btn-primary {
        --btn-fg: var(--on-accent);
        background: linear-gradient(135deg, var(--accent-hi), var(--accent) 60%, var(--accent-lo));
        box-shadow: 0 6px 24px rgb(200 184 138 / 0.22);
    }
    .btn-primary:hover:not(:disabled) { box-shadow: 0 10px 34px rgb(200 184 138 / 0.38); }

    .btn-secondary {
        --btn-bg: rgb(255 255 255 / 0.04);
        --btn-fg: var(--accent-hi);
        border-color: var(--accent-line);
        backdrop-filter: blur(8px);
    }
    .btn-secondary:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }

    .btn-block { width: 100%; }
    .btn-icon { min-height: 0; padding: 0; width: 2.75rem; height: 2.75rem; }

    /* --- Formularze --- */
    .field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
    .field > label, .field-label {
        font-size: var(--fs-xs);
        font-weight: 600;
        letter-spacing: 0.04em;
        color: var(--text-2);
    }
    .field .opt { margin-left: 0.4rem; font-weight: 500; color: var(--text-3); letter-spacing: 0; }

    .input, .select, .textarea {
        width: 100%;
        min-height: 3rem;
        padding: 0.7rem 1rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-md);
        background: var(--surface-2);
        color: var(--text);
        transition: border-color var(--dur), box-shadow var(--dur), background-color var(--dur);
    }
    .textarea { min-height: 8rem; resize: vertical; line-height: 1.55; }
    .select { appearance: none; padding-right: 2.5rem; cursor: pointer;
        background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
        background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
        background-size: 0.4rem 0.4rem;
        background-repeat: no-repeat;
    }
    .input::placeholder, .textarea::placeholder { color: var(--text-3); }
    .input:hover, .select:hover, .textarea:hover { border-color: var(--accent-line); }
    .input:focus-visible, .select:focus-visible, .textarea:focus-visible {
        outline: none;
        border-color: var(--accent);
        box-shadow: 0 0 0 3px var(--accent-soft);
    }
    .input:user-invalid, .select:user-invalid, .textarea:user-invalid,
    .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
        border-color: var(--err);
        background-color: var(--err-soft);
    }
    .field-error { margin-top: 0.15rem; font-size: var(--fs-xs); color: var(--err); }
    .field-error:empty { display: none; }
    .field-row { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

    /* Pole z prefiksem (telefon) */
    .phone-group { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 0.6rem; }
    @media (max-width: 479.98px) { .phone-group { grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); } }

    /* Checkbox zgody */
    .consent {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        font-size: var(--fs-sm);
        color: var(--text-2);
        cursor: pointer;
    }
    .consent input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; accent-color: var(--accent); cursor: pointer; }
    .consent a { color: var(--accent-hi); }
    .consent:has(input:user-invalid), .consent.is-invalid { color: var(--err); }

    /* --- Dialogi (natywne <dialog>) --- */
    dialog { margin: auto; border: 0; padding: 0; background: transparent; color: inherit; max-width: 100vw; max-height: 100dvh; overflow: visible; }
    dialog::backdrop { background: var(--scrim); backdrop-filter: blur(6px); }
    dialog[open] { animation: dialog-in 0.28s var(--ease); }
    dialog[open]::backdrop { animation: fade-in 0.28s ease; }
    html:has(dialog[open]) { overflow: hidden; }

    .modal {
        position: relative;
        width: min(100vw - 2rem, var(--modal-w, 42rem));
        max-height: min(100dvh - 2rem, 52rem);
        overflow: auto;
        overscroll-behavior: contain;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-lg);
        background: var(--surface);
        box-shadow: var(--shadow-2);
    }
    .modal-close {
        position: absolute;
        top: 0.9rem;
        right: 0.9rem;
        z-index: 2;
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 50%;
        background: rgb(255 255 255 / 0.08);
        color: var(--text);
        font-size: 1.1rem;
        transition: background-color var(--dur), transform var(--dur) var(--ease);
    }
    .modal-close:hover { background: rgb(255 255 255 / 0.16); transform: rotate(90deg); }
    @media (max-width: 639.98px) {
        dialog.sheet { margin: auto 0 0; width: 100%; }
        dialog.sheet .modal { width: 100%; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
    }

    @keyframes dialog-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } }
    @keyframes fade-in { from { opacity: 0; } }

    /* --- Toast --- */
    .toast-host { position: fixed; inset: auto 1rem 1.25rem; z-index: var(--z-toast); display: grid; justify-items: center; gap: 0.6rem; pointer-events: none; }
    .toast {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        max-width: min(32rem, 100%);
        padding: 0.85rem 1.2rem;
        border: 1px solid var(--line-strong);
        border-radius: var(--r-pill);
        background: var(--surface-3);
        box-shadow: var(--shadow-2);
        font-size: var(--fs-sm);
        pointer-events: auto;
        animation: dialog-in 0.28s var(--ease);
    }
    .toast[data-kind="ok"] i { color: var(--ok); }
    .toast[data-kind="err"] i { color: var(--err); }

    /* --- Pomocnicze --- */
    .sr-only {
        position: absolute;
        width: 1px; height: 1px;
        margin: -1px; padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .skip-link {
        position: fixed;
        top: 0.75rem;
        left: 0.75rem;
        z-index: 1000;
        padding: 0.7rem 1.1rem;
        border-radius: var(--r-md);
        background: var(--accent);
        color: var(--on-accent);
        font-weight: 600;
        text-decoration: none;
        transform: translateY(-200%);
    }
    .skip-link:focus { transform: none; }
    .text-accent { color: var(--accent-hi); }
}