/* ═══════════════════════════════════════════════════════════════════════════
 *  GABINET OS — design tokens (Paczka 3)
 *  TwójSalon 2026 — portal rezerwacji premium
 *
 *  Jedno źródło prawdy dla palety, typografii, promieni, cieni, rytmu.
 *  KOMPONENTY NIE ZAWIERAJĄ HEXÓW — czytają te zmienne. Dzięki temu przyszłe
 *  motywy per-salon (Minimal/Luxury/Soft/Modern) to podmiana wartości tutaj,
 *  a nie przepisywanie widoków.
 *
 *  Motyw bazowy: „Ivory + Black + Champagne" (Apple / Aesop / luksusowy hotel).
 *  Wczytywane PRZED tailwind.css, żeby utility Tailwinda mogły korzystać
 *  z tych zmiennych (przez tailwind.config.js).
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Paleta bazowa (motyw Ivory) ──────────────────────────────────────── */
    --go-ivory:        #F7F6F2;  /* ciepła kość słoniowa — główne tło */
    --go-white:        #FFFFFF;  /* biel — karty, panele */
    --go-ink:          #111111;  /* prawie czarny — tekst, główny CTA */
    --go-beige:        #D8D2C7;  /* delikatny beż — obramowania, tła 2. rzędu */
    --go-champagne:    #B69B78;  /* szampańskie złoto — JEDEN akcent */

    /* ── Role semantyczne (komponenty używają TYCH, nie surowych powyżej) ──── */
    --go-bg:           var(--go-ivory);   /* tło strony */
    --go-surface:      var(--go-white);   /* karta/panel */
    --go-surface-2:    #FBFAF7;           /* subtelnie odcięta biel (sekcje) */
    --go-text:         var(--go-ink);     /* tekst główny */
    --go-text-soft:    #5A574F;           /* tekst drugorzędny (ciepły grafit) */
    --go-text-muted:   #96918A;           /* podpisy, metadane */
    --go-border:       var(--go-beige);   /* hairline */
    --go-border-soft:  #EBE7DF;           /* jeszcze lżejsze obramowanie */
    --go-accent:       var(--go-champagne);
    --go-accent-ink:   #6E5A3E;           /* tekst NA szampańskim tle (kontrast AA) */
    --go-accent-soft:  #EFE8DC;           /* pastelowe tło akcentu (badge, aktywne) */

    /* Stany funkcjonalne — oszczędnie, ciepłe odcienie zamiast krzykliwych */
    --go-success:      #4F7A5B;
    --go-success-soft: #E7F0E8;
    --go-danger:       #B4544A;
    --go-danger-soft:  #F6E7E4;

    /* ── Typografia ───────────────────────────────────────────────────────── */
    /* Display: Libre Franklin (grotesk redakcyjny, z charakterem) — nagłówki, hero.
       Body: Inter (neutralny grotesk) — treść, UI.
       Utility: Inter tabular — ceny, godziny (wyrównane cyfry). */
    --go-font-display: 'Libre Franklin', -apple-system, 'Segoe UI', sans-serif;
    --go-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --go-font-num:     'Inter', ui-monospace, monospace; /* z font-feature tabular */

    /* Skala typograficzna (mobile-first; klamry rozmiaru w komponentach) */
    --go-text-xs:   0.75rem;   /* 12 — metadane */
    --go-text-sm:   0.875rem;  /* 14 — podpisy, przyciski wtórne */
    --go-text-base: 1rem;      /* 16 — treść */
    --go-text-lg:   1.125rem;  /* 18 */
    --go-text-xl:   1.375rem;  /* 22 — podnagłówki */
    --go-text-2xl:  1.875rem;  /* 30 — nagłówki sekcji */
    --go-text-3xl:  2.5rem;    /* 40 — hero mobile */
    --go-text-4xl:  3.5rem;    /* 56 — hero desktop */

    /* ── Promienie (16–24px wg wizji „GABINET OS") ────────────────────────── */
    --go-radius-sm:  10px;
    --go-radius:     16px;   /* domyślny — karty, przyciski */
    --go-radius-lg:  22px;   /* duże kafle, hero panele */
    --go-radius-xl:  28px;
    --go-radius-full: 999px; /* pigułki, avatary */

    /* ── Cienie (bardzo subtelne — Quiet UI, nie efekciarstwo) ────────────── */
    --go-shadow-sm:   0 1px 2px rgba(17,17,17,0.04);
    --go-shadow:      0 4px 20px rgba(17,17,17,0.06), 0 1px 3px rgba(17,17,17,0.04);
    --go-shadow-lg:   0 12px 40px rgba(17,17,17,0.10), 0 2px 8px rgba(17,17,17,0.05);
    --go-shadow-cta:  0 6px 20px rgba(17,17,17,0.18);

    /* ── Rytm / spacing (px do wnętrz, rem do rytmu pionowego) ────────────── */
    --go-gap-xs: 6px;
    --go-gap-sm: 10px;
    --go-gap:    16px;
    --go-gap-lg: 24px;
    --go-gap-xl: 40px;

    /* ── Ruch (mikroanimacje, respektuje reduced-motion niżej) ────────────── */
    --go-ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
    --go-dur-fast:  140ms;
    --go-dur:       220ms;
    --go-dur-slow:  380ms;

    /* ── Warstwy (z-index) ────────────────────────────────────────────────── */
    --go-z-nav:     40;
    --go-z-bottom:  45;   /* mobilny dolny pasek */
    --go-z-modal:   60;
    --go-z-toast:   70;
}

/* Cyfry tabelaryczne dla cen/godzin — spójne wyrównanie w kolumnach. */
.go-num {
    font-family: var(--go-font-num);
    font-feature-settings: 'tnum' 1, 'lnum' 1;
    letter-spacing: 0.01em;
}

/* Szanuj preferencję ograniczonego ruchu (dostępność — quality floor). */
@media (prefers-reduced-motion: reduce) {
    :root {
        --go-dur-fast: 0ms;
        --go-dur:      0ms;
        --go-dur-slow: 0ms;
    }
}