/* ==========================================================================
   Przystań — Design tokens
   Fundament systemu wizualnego: kolory marki, skala typograficzna, rytm
   przestrzeni, promienie, cienie i krzywe animacji.
   Paleta marki jest niezmienna — warianty poniżej to wyłącznie odcienie
   i przezroczystości bazowych kolorów.
   ========================================================================== */

:root {
    /* --- Paleta marki (wartości niezmienne) --- */
    --primary-color: #E39758;      /* pomarańczowy z logo */
    --secondary-color: #4A8B8B;    /* teal z logo */
    --accent-color: #FCCFB3;       /* brzoskwiniowy — kolor dominujący */
    --dark-color: #2C3E3F;         /* ciemny grafitowo-zielony */
    --light-color: #FFF5EE;        /* bardzo jasny brzoskwiniowy — tło */
    --text-dark: #1a1a1a;
    --text-light: #666666;
    --white: #ffffff;

    /* --- Odcienie pochodne (tints / shades bazowej palety) --- */
    --primary-050: #FBF0E7;
    --primary-100: #F6DFCC;
    --primary-600: #C97C3C;        /* ciemniejszy wariant do tekstu na jasnym tle (kontrast AA) */
    --primary-700: #A5632D;
    --secondary-050: #EDF5F5;
    --secondary-100: #D6E8E8;
    --secondary-600: #3A7070;
    --secondary-700: #2C5757;
    --dark-700: #22302F;
    --dark-900: #16211F;

    /* --- Kanały RGB do budowania przezroczystości --- */
    --primary-rgb: 227, 151, 88;
    --secondary-rgb: 74, 139, 139;
    --accent-rgb: 252, 207, 179;
    --dark-rgb: 44, 62, 63;
    --light-rgb: 255, 245, 238;
    --white-rgb: 255, 255, 255;

    /* --- Role semantyczne --- */
    --surface: var(--white);
    --surface-muted: var(--light-color);
    --surface-inverse: var(--dark-color);
    --text-on-dark: #F4EDE6;
    --text-on-dark-muted: rgba(244, 237, 230, 0.72);
    --border-soft: rgba(var(--dark-rgb), 0.10);
    --border-strong: rgba(var(--dark-rgb), 0.20);

    /* --- Szkło (glassmorphism) --- */
    --glass-bg: rgba(var(--white-rgb), 0.72);
    --glass-bg-strong: rgba(var(--white-rgb), 0.88);
    --glass-border: rgba(var(--white-rgb), 0.55);
    --glass-blur: 18px;

    /* --- Gradienty marki --- */
    --gradient-warm: linear-gradient(135deg, var(--primary-color), var(--accent-color));
    --gradient-brand: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-calm: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    --gradient-text: linear-gradient(115deg, var(--primary-700) 0%, var(--primary-color) 40%, var(--secondary-color) 100%);

    /* --- Typografia --- */
    --font-sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

    /* Fluid scale — płynne skalowanie między 360px a 1440px viewportu */
    --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.94rem);
    --step-0:  clamp(1rem, 0.95rem + 0.22vw, 1.13rem);
    --step-1:  clamp(1.2rem, 1.11rem + 0.38vw, 1.45rem);
    --step-2:  clamp(1.44rem, 1.29rem + 0.64vw, 1.85rem);
    --step-3:  clamp(1.73rem, 1.48rem + 1.05vw, 2.37rem);
    --step-4:  clamp(2.07rem, 1.69rem + 1.65vw, 3.03rem);
    --step-5:  clamp(2.49rem, 1.91rem + 2.5vw, 3.88rem);
    --step-6:  clamp(2.99rem, 2.12rem + 3.71vw, 4.96rem);
    --step-7:  clamp(3.58rem, 2.3rem + 5.44vw, 6.35rem);

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.65;
    --tracking-tight: -0.03em;
    --tracking-wide: 0.14em;

    /* --- Rytm przestrzeni --- */
    --space-3xs: 0.25rem;
    --space-2xs: 0.5rem;
    --space-xs: 0.75rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;
    --section-padding: clamp(4.5rem, 3rem + 6vw, 9rem);
    --container-max: 1240px;
    --container-gutter: clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

    /* --- Promienie (miękkie, organiczne kształty) --- */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    --radius-xl: 40px;
    --radius-pill: 999px;
    --radius-blob: 62% 38% 46% 54% / 52% 44% 56% 48%;

    /* --- Cienie warstwowe (ciepłe, nie neutralne) --- */
    --shadow-xs: 0 1px 2px rgba(var(--dark-rgb), 0.06);
    --shadow-sm: 0 2px 8px rgba(var(--dark-rgb), 0.07);
    --shadow-md: 0 10px 30px -12px rgba(var(--dark-rgb), 0.22);
    --shadow-lg: 0 24px 60px -24px rgba(var(--dark-rgb), 0.28);
    --shadow-xl: 0 40px 90px -32px rgba(var(--dark-rgb), 0.34);
    --shadow-glow-warm: 0 20px 60px -20px rgba(var(--primary-rgb), 0.55);
    --shadow-glow-cool: 0 20px 60px -20px rgba(var(--secondary-rgb), 0.45);

    /* --- Ruch --- */
    --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out-soft: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --duration-fast: 180ms;
    --duration-base: 320ms;
    --duration-slow: 620ms;
    --duration-reveal: 900ms;

    /* --- Warstwy --- */
    --z-background: 0;
    --z-content: 1;
    --z-sticky: 100;
    --z-navbar: 1000;
    --z-overlay: 1100;
    --z-modal: 1200;

    /* --- Layout --- */
    --nav-height: 84px;
    --nav-height-scrolled: 68px;
}

@media (max-width: 720px) {
    :root {
        --nav-height: 72px;
        --nav-height-scrolled: 62px;
    }
}

/* Wariant statyczny dla osób wrażliwych na ruch — wygaszamy każdy czas trwania
   globalnie, a poszczególne komponenty dodatkowo wyłączają transformacje. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 1ms;
        --duration-base: 1ms;
        --duration-slow: 1ms;
        --duration-reveal: 1ms;
    }
}