/* ============================================================
 * tokens.css — Design tokens (zmienne CSS) systemu Fotogaleria.
 *
 * To jest "panel sterowania" wyglądu — jedyne miejsce, w którym
 * zmieniasz kolory, odstępy, typografię. Reszta CSS tylko z tego korzysta.
 * Motyw jest CIEMNY, minimalistyczny, elegancki (patrz Projekt.md sekcja 7).
 *
 * Punkty łamania (breakpointy) — CSS nie pozwala używać zmiennych w @media,
 * więc trzymamy je jako stałe również tutaj, dla referencji:
 *   telefon:  < 640px
 *   tablet:   640px – 1024px
 *   desktop:  > 1024px
 * ============================================================ */

:root {
    /* ---------- Kolory: tła (ciemny motyw) ---------- */
    --color-bg:            #0b0b0d;  /* główne tło — głęboka czerń z nutą chłodu */
    --color-bg-elevated:   #15151a;  /* karty, kafelki — lekko jaśniejsza warstwa */
    --color-bg-subtle:     #1d1d23;  /* hover kafelków, pola formularzy */
    --color-bg-overlay:    rgba(5, 5, 7, 0.86); /* tło lightboxa / modali */

    /* ---------- Kolory: tekst ---------- */
    --color-text:          #f4f4f6;  /* tekst główny — miękka biel, nie #fff */
    --color-text-muted:    #a6a6b0;  /* podpisy, metadane, daty */
    --color-text-subtle:   #6c6c77;  /* tekst trzeciorzędny, placeholdery */

    /* ---------- Kolory: akcent i obramowania ---------- */
    --color-accent:        #c9a36a;  /* ciepły, stonowany złoty — elegancki akcent */
    --color-accent-hover:  #d8b681;
    --color-border:        rgba(255, 255, 255, 0.10); /* delikatne linie na ciemnym */
    --color-border-strong: rgba(255, 255, 255, 0.18);

    /* ---------- Kolory: stany ---------- */
    --color-focus:         #8ab4f8;  /* pierścień focus (dostępność) */
    --color-success:       #6bbf73;
    --color-danger:        #e0746b;

    /* ---------- Typografia: rodziny ---------- */
    /* Display (tytuły galerii) — elegancki serif (editorial). Body — czysty sans.
       Zmienne ułatwiają późniejszą podmianę na font self-hosted (bez Google, RODO). */
    --font-display: Georgia, "Times New Roman", "Iowan Old Style", serif;
    --font-sans:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                    Helvetica, Arial, "Helvetica Neue", sans-serif;

    /* ---------- Typografia: skala (fluid przez clamp) ---------- */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --text-2xl:  clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    --text-3xl:  clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
    --text-4xl:  clamp(2.5rem, 1.7rem + 4vw, 4.75rem);  /* tytuł landingu */

    /* ---------- Typografia: interlinie i tracking ---------- */
    --leading-tight:  1.12;
    --leading-snug:   1.3;
    --leading-normal: 1.6;
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide:  0.04em;
    --tracking-wider: 0.14em;  /* wersaliki, etykiety */

    /* ---------- Wagi ---------- */
    --weight-light:    300;
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;

    /* ---------- Odstępy (skala nazwana) ---------- */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2.5rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --space-4xl: 9rem;   /* duże oddechy między sekcjami (landing) */

    /* ---------- Layout ---------- */
    --container-max:    1320px; /* maksymalna szerokość treści */
    --container-narrow: 720px;  /* kolumna tekstu (strony prawne itp.) */
    --container-pad:    clamp(1.25rem, 0.5rem + 3vw, 3rem); /* margines boczny */

    /* Siatka galerii — minimalna szerokość kafelka (auto-fill minmax) */
    --grid-tile-min:    260px;
    --grid-gap:         clamp(0.75rem, 0.4rem + 1.2vw, 1.5rem);

    /* ---------- Zaokrąglenia ---------- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* ---------- Cienie (subtelne na ciemnym tle) ---------- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.6);

    /* ---------- Przejścia ---------- */
    --ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
    --transition-fast: 150ms var(--ease-out);
    --transition-base: 260ms var(--ease-out);
    --transition-slow: 480ms var(--ease-out);

    /* ---------- Warstwy (z-index) ---------- */
    --z-header:   100;
    --z-overlay:  900;
    --z-lightbox: 1000;
    --z-toast:    1100;
}