/* ==========================================================================
   WYŁUSKANE — tokeny projektu
   Źródło palety i fontów: notatka w arkuszu HOME (I4–I15).
   Kontrasty (WCAG) policzone dla par używanych w sekcjach — patrz komentarze.
   ========================================================================== */

/* ---------- Fonty (pliki lokalne w kod/fonts/, źródło: fontsource 5.3.0, licencja OFL-1.1) ----------
   latin-ext zawiera polskie znaki (ą, ę, ł, ń, ś, ź, ż). */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-ext-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  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: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-ext-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  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";
  src: url("fonts/montserrat-latin-300.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-ext-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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";
  src: url("fonts/montserrat-latin-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin-ext-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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";
  src: url("fonts/montserrat-latin-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
  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;
}

@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-ext-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  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: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  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;
}

:root {
  /* ---------- Kolory: paleta bazowa z notatki ---------- */
  --color-sage-300: #b0c4c2;      /* SZAŁWIA-BAZA */
  --color-lavender-300: #c4b8d4;  /* FIOLET AKCENTY */
  --color-cream: #f5f1ea;         /* KREM – tło */
  --color-ink: #545454;           /* CZCIONKI */
  --color-white: #ffffff;         /* EWENTUALNIE BIAŁE TŁO */

  /* ---------- Kolory: odcienie pochodne (dla kontrastu i warstw) ---------- */
  --color-paper: #fbf9f5;         /* jaśniejsza powierzchnia kart; ink 7.2:1 */
  --color-sage-100: #ebf0ee;      /* tło pasów; ink 6.57:1 */
  --color-sage-200: #d3dfdd;      /* tło newslettera; ink 5.54:1 */
  --color-sage-700: #4d6a66;      /* przyciski; biały tekst 5.88:1, na kremie 5.1:1+ */
  --color-sage-800: #3d5451;      /* hover przycisku; biały 8.12:1 */
  --color-sage-900: #33403e;      /* active przycisku; biały 10.8:1 */
  --color-lavender-100: #f1edf5;  /* tło pasa Instagram; ink 6.55:1 */
  --color-lavender-500: #8a76a8;  /* akcent w dużych nagłówkach; 3.56:1 (tekst duży) */
  --color-lavender-700: #6f5c8c;  /* eyebrow, linki akcentowe; na kremie 5.2:1 */

  /* ---------- Kolory: próbki tkanin (konfigurator produktu, z makiet) ---------- */
  --swatch-szalwia: #9fb1a7;
  --swatch-blekit: #8db2de;
  --swatch-roz: #eea5b5;
  --swatch-fiolet: #8d6aa7;
  --swatch-krem: #f3dcc6;
  --swatch-magenta: #b12a62;
  --color-star: #d9923f;          /* gwiazdki ocen – element dekoracyjny */

  /* ---------- Kolory: role ---------- */
  --color-bg: var(--color-cream);
  --color-surface: var(--color-paper);
  --color-text: var(--color-ink);
  --color-heading: var(--color-ink);
  --color-accent-text: var(--color-lavender-700);
  --color-accent-display: var(--color-lavender-500);
  --color-accent-decor: var(--color-lavender-300);
  --color-action: var(--color-sage-700);
  --color-action-hover: var(--color-sage-800);
  --color-action-active: var(--color-sage-900);
  --color-on-action: var(--color-white);
  --color-disabled-bg: var(--color-sage-100);
  --color-disabled-text: var(--color-sage-300);
  --color-line: rgba(84, 84, 84, 0.16);
  --color-line-strong: rgba(84, 84, 84, 0.32);
  --color-focus: var(--color-lavender-700);
  --color-placeholder: var(--color-sage-100);
  --color-placeholder-hatch: rgba(77, 106, 102, 0.07);
  --color-overlay: rgba(51, 64, 62, 0.72);   /* tekst biały na zdjęciu; >4.5:1 na jasnych kadrach */
  --color-on-overlay: var(--color-white);

  /* ---------- Typografia ---------- */
  --font-serif: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-sans: "Montserrat", "Helvetica Neue", Helvetica, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;

  /* Skala z jednego współczynnika: 1.25 (tercja wielka), baza 1rem */
  --step--2: 0.64rem;
  --step--1: 0.8rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;
  --step-6: 3.815rem;

  /* Role typograficzne (płynne między krokami tej samej skali) */
  --text-display: clamp(var(--step-4), 2.2rem + 2.4vw, var(--step-6));
  --text-h2: clamp(var(--step-3), 1.6rem + 1.2vw, var(--step-4));
  --text-h3: var(--step-1);
  --text-lead: var(--step-0);
  --text-body: var(--step-0);
  --text-small: var(--step--1);
  --text-micro: var(--step--2);

  --leading-tight: 1.08;
  --leading-heading: 1.2;
  --leading-body: 1.7;

  --tracking-caps: 0.14em;
  --tracking-tight: 0.06em;
  --tracking-wide: 0.22em;
  --tracking-logo: 0.28em;

  --measure: 65ch;
  --measure-narrow: 38ch;

  /* ---------- Odstępy ---------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6.5rem;
  --space-4xl: 9rem;

  --gutter: clamp(1rem, 4vw, 3rem);
  --container: 80rem;
  --container-wide: 92rem;

  /* ---------- Kształt ---------- */
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-round: 999px;
  --border-width: 1px;
  --icon-stroke: 1.4;
  --icon-s: 1.25rem;
  --icon-m: 1.75rem;
  --icon-l: 2.5rem;

  /* Maksymalnie 3 poziomy cienia */
  --shadow-1: 0 1px 2px rgba(51, 64, 62, 0.06);
  --shadow-2: 0 6px 18px rgba(51, 64, 62, 0.08);
  --shadow-3: 0 18px 40px rgba(51, 64, 62, 0.12);

  /* ---------- Ruch ---------- */
  --dur-fast: 160ms;
  --dur-med: 320ms;
  --dur-slow: 700ms;
  --dur-slide: 900ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --lift: -2px;
  --reveal-shift: 14px;
  --zoom-hover: 1.04;

  /* ---------- Warstwy ---------- */
  --z-dropdown: 20;
  --z-header: 30;
  --z-overlay: 40;

  /* ---------- Rozmiary komponentów ---------- */
  --header-height: 4.5rem;
  --logo-mark-s: 1.875rem;
  --logo-mark-m: 3rem;
  --control-height: 3.25rem;
  --tap-size: 2.5rem;
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 3px;

  /* ---------- Wymiary elementów ---------- */
  --dropdown-min: 12rem;
  --recycle-max: 40rem;
  --badge-s: 8.5rem;
  --badge-m: 10rem;
  --badge-l: 11rem;
  --media-min: 22rem;
  --band-min: 32rem;
  --hero-min: 36rem;
  --hero-min-l: 40rem;

  /* ---------- Skale i przezroczystości stanów ---------- */
  --press-scale: 0.94;
  --press-scale-soft: 0.98;
  --grow-scale: 1.25;
  --pulse-scale: 1.12;      /* puls serduszka – delikatniejszy niż grow */
  --enter-scale: 0.9;
  --flip: 180deg;
  --tilt: -4deg;
  --stagger: 90ms;
  --muted-opacity: 0.6;
  --placeholder-opacity: 0.8;

  /* ---------- Warstwy sekcji ---------- */
  --z-base: 1;
  --z-raised: 2;
}