/*
 * tokens.css — Design tokens iDEO Design.
 * Paleta i typografia odczytane ze screenów produkcji (2026-06-01):
 * - Tło neutralne: biel + pudrowy beż w sekcjach
 * - Akcenty: szampańskie złoto na CTA
 * - Logo: serif kursywa
 * - Nagłówki: serif klasyczny
 * - Body: sans-serif
 * Wartości CSS Variables docelowo do weryfikacji pipetą z globalnego CSS Elementora.
 */

:root {
    /* ── Kolory marki ── */
    --ideo-color-primary:        #CAAB69;   /* złoto iDEO (CTA / przyciski / ikony) */
    --ideo-color-primary-dark:   #a98c4d;
    --ideo-color-primary-soft:   #dfc594;
    --ideo-color-accent:         #CAAB69;   /* złoto iDEO (akcenty) */

    --ideo-color-bg:             #ffffff;
    --ideo-color-bg-soft:        #f5ede2;   /* sekcje pudrowe */
    --ideo-color-bg-warm:        #f0e6d6;
    --ideo-color-bg-dark:        #1a1a1a;   /* footer */

    --ideo-color-text:           #1a1a1a;
    --ideo-color-text-muted:     #6b6258;
    --ideo-color-text-inverse:   #ffffff;

    --ideo-color-border:         #e8dfd1;
    --ideo-color-border-soft:    #f2ebe0;

    --ideo-color-success:        #4a7c59;
    --ideo-color-error:          #b04848;

    /* ── Typografia (zgodne z produkcją iDEO) ── */
    --ideo-font-logo:            'Allura', 'Great Vibes', 'Cormorant Garamond', cursive;
    --ideo-font-display:         'Cormorant Garamond', 'Times New Roman', Georgia, serif;
    --ideo-font-body:            'Source Sans 3', 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    --ideo-fw-display:           500;   /* waga nagłówków Cormorant Garamond */

    --ideo-fs-xs:                clamp(0.75rem, 0.7rem + 0.2vw, 0.85rem);
    --ideo-fs-sm:                clamp(0.85rem, 0.8rem + 0.2vw, 0.95rem);
    --ideo-fs-base:              clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
    --ideo-fs-lg:                clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem);
    --ideo-fs-xl:                clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
    --ideo-fs-h3:                clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
    --ideo-fs-h2:                clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
    --ideo-fs-h1:                clamp(2.5rem, 2rem + 2.4vw, 4rem);
    --ideo-fs-display:           clamp(3rem, 2.4rem + 3vw, 5rem);

    --ideo-lh-tight:             1.15;
    --ideo-lh-snug:              1.35;
    --ideo-lh-normal:            1.6;
    --ideo-lh-loose:             1.8;

    --ideo-fw-regular:           400;
    --ideo-fw-medium:            500;
    --ideo-fw-semibold:          600;
    --ideo-fw-bold:              700;

    --ideo-letter-tight:         -0.01em;
    --ideo-letter-normal:        0;
    --ideo-letter-wide:          0.06em;
    --ideo-letter-wider:         0.12em;

    /* ── Spacing scale ── */
    --ideo-sp-1:                 0.25rem;
    --ideo-sp-2:                 0.5rem;
    --ideo-sp-3:                 0.75rem;
    --ideo-sp-4:                 1rem;
    --ideo-sp-5:                 1.5rem;
    --ideo-sp-6:                 2rem;
    --ideo-sp-7:                 3rem;
    --ideo-sp-8:                 4rem;
    --ideo-sp-9:                 6rem;
    --ideo-sp-10:                8rem;

    /* ── Container ── */
    --ideo-container-max:        1320px;
    --ideo-container-narrow:     820px;
    --ideo-container-pad:        clamp(1rem, 4vw, 2.5rem);

    /* ── Radius ── */
    --ideo-radius-sm:            2px;
    --ideo-radius-md:            4px;
    --ideo-radius-lg:            8px;
    --ideo-radius-pill:          999px;

    /* ── Shadows ── */
    --ideo-shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.04);
    --ideo-shadow-md:            0 4px 16px rgba(26, 26, 26, 0.06);
    --ideo-shadow-lg:            0 16px 48px rgba(26, 26, 26, 0.10);

    /* ── Motion ── */
    --ideo-ease:                 cubic-bezier(0.4, 0, 0.2, 1);
    --ideo-ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
    --ideo-dur-fast:             160ms;
    --ideo-dur-base:             280ms;
    --ideo-dur-slow:             480ms;

    /* ── Layout ── */
    --ideo-z-header:             100;
    --ideo-z-mega-menu:          110;
    --ideo-z-overlay:            500;
    --ideo-z-modal:              1000;

    --ideo-header-h:             92px;
}