/* Stockinette — Warstwa tokenów — kolory, typografia, przestrzeń, promienie, cienie.
   Jedyne miejsce z literałami. Komponenty czytają wyłącznie stąd. */

:root {
  /* Jost niesie nagłówki — to krój ze znaku Stockinette.
     IBM Plex Sans zostaje na interfejsie i tekście ciągłym, bo czyta się go
     lepiej w małych rozmiarach i w długich akapitach; Mono obsługuje dane
     liczbowe (gramatura, szerokość, sygnatury), bo ma cyfry tabelaryczne
     i kolumny parametrów układają się w pionie.
     Serif zostaje zdefiniowany, ale nic go już nie używa — to on odpowiadał
     za „ładny landing”. */
  --font-display: "Jost", "IBM Plex Sans", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Source Serif 4", Georgia, serif;

  --font-heading: var(--font-display);
  --font-ui: var(--font-sans);
  --font-body: var(--font-sans);
  --font-data: var(--font-mono);
}

/* Paleta marki Stockinette: granat + krem + taupe, wzięte z nowego znaku
   (kafelek z „S” i splotem, 2026-09-29): granat napisu i tła kafelka, krem
   z kwadratu pod „S”, trzy odcienie oczek splotu. Nigdy czysta czerń,
   nigdy czysty szary. Wartości pochodzą z księgi znaku — plik
   `tokens/brand-stockinette.css` w folderze „stockinette - design system”.
   Wcześniej stała tu paleta F.H. Luna (oliwka + ciepłe neutralne); jest tam
   nadal jako druga marka, więc nie nadpisuj tego pliku tamtymi wartościami. */
:root {
  /* Znak — trzy barwy nośne marki */
  --brand-sand: #B7A99C;
  --brand-sand-deep: #8C7E71;
  --brand-graphite: #121E2A;
  --brand-brown: #695F55;
  --brand-bone: #FDFAF6;

  /* Primary — granat ze znaku (nazwa --brand-graphite zostaje dla zgodności) */
  --color-primary-900: #0B141D;
  --color-primary-800: #121E2A;
  --color-primary-700: #1F2D3B;
  --color-primary-600: #3A4A5A;
  --color-primary-100: #EDE2D5;
  --color-primary-50:  #F7EFE5;

  /* Neutrals — warm graphite → cream */
  --color-neutral-950: #0F1822;
  --color-neutral-800: #28323D;
  --color-neutral-700: #48525D;
  --color-neutral-600: #5F6770;
  --color-neutral-400: #A9A198;
  --color-neutral-300: #D2C7BA;
  --color-neutral-200: #E2D8CB;
  --color-neutral-100: #EFE7DC;
  --color-neutral-50:  #F8F3EC;

  --color-white: #FFFFFF;
  --color-background: #FDFAF6;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F4EBE0;

  /* Semantic status */
  --color-success: #3F704D;
  --color-warning: #A16D24;
  --color-error:   #9A3F3F;
  --color-success-surface: #EAF0EB;
  --color-warning-surface: #F6EFE2;
  --color-error-surface:   #F5EAEA;

  /* ---- Semantic aliases: use these in components ---- */
  --text-primary: var(--color-neutral-950);
  --text-secondary: var(--color-neutral-700);
  --text-muted: var(--color-neutral-600);
  --text-inverse: var(--color-white);
  --text-accent: var(--brand-brown);
  --text-on-accent: var(--color-white);

  --surface-page: var(--color-background);
  --surface-card: var(--color-surface);
  --surface-sunken: var(--color-surface-muted);
  --surface-accent-soft: #F8F0E6;
  --surface-accent-tint: #EEE2D4;
  --surface-accent-strong: var(--brand-graphite);
  --surface-inverse: var(--color-neutral-950);

  --border-subtle: var(--color-neutral-200);
  --border-strong-color: var(--color-neutral-300);
  --border-accent: var(--brand-sand);
  --focus-ring: var(--brand-graphite);

  --border-default: 1px solid var(--color-neutral-200);
  --border-strong: 1px solid var(--color-neutral-300);

  /* Warm background wash used behind hero + section breaks */
  --gradient-warm: linear-gradient(168deg, #FEFBF7 0%, #F9F2E9 46%, #F3EADF 100%); /* @kind color */
  --gradient-accent-soft: linear-gradient(160deg, #F8F0E6 0%, #EEE2D4 100%); /* @kind color */
  /* Tła sekcji zamiast płaskich kolorów. Te same wartości stoją wprost
     w atrybutach wierszy Kadence (FILL_GRADIENT i DARK_GRADIENT
     w scripts/lib/prelude.mjs) — zmieniając je tutaj, zmień też tam.
     Beż jest poziomy, żeby sąsiednie wiersze łączyły się bez szwu. */
  --gradient-band: linear-gradient(90deg, #FBF7F1 0%, #F6EFE6 55%, #F3EADF 100%); /* @kind color */
  --gradient-dark: radial-gradient(ellipse 60% 140% at 92% 0%, rgba(140,126,113,0.16) 0%, rgba(140,126,113,0) 70%), linear-gradient(135deg, #121E2A 0%, #0F1822 55%, #0A121A 100%); /* @kind color */
  /* Placeholder weave used only where real material photography is not yet supplied */
  --texture-weave: repeating-linear-gradient(45deg, rgba(15,24,34,.035) 0 2px, transparent 2px 6px),
                   repeating-linear-gradient(-45deg, rgba(15,24,34,.028) 0 2px, transparent 2px 6px); /* @kind other */
}

:root {
  --font-size-display-xl: clamp(3.5rem, 5.5vw, 6rem);
  --font-size-display-lg: clamp(3rem, 4.5vw, 5rem);
  --font-size-h1: clamp(2.75rem, 4vw, 4.5rem);
  --font-size-h2: clamp(2.25rem, 3vw, 3.5rem);
  --font-size-h3: clamp(1.5rem, 2vw, 2rem);
  --font-size-h4: 1.25rem;

  --font-size-body-lg: 1.125rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.875rem;
  --font-size-label: 0.8125rem;

  --line-height-heading: 1.05;
  --line-height-title: 1.15;
  --line-height-body: 1.65;
  --line-height-ui: 1.4;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Nagłówki bez rozstrzelenia (decyzja klienta 2026-09-13). Księga znaku daje
     +0,08em na napisach wyświetlanych i +0,06em na nagłówkach, ale przy Joście
     w małych literach czytało się to luźno. Bloki Kadence niosą ten sam trakt
     w atrybutach — zob. scripts/apply-heading-tracking.php. Etykiety pisane
     wersalikami (label, eyebrow) trakt zachowują. */
  --tracking-display: 0;
  --tracking-heading: 0;
  --tracking-normal: 0;
  --tracking-label: 0.08em;
  --tracking-eyebrow: 0.12em;

  --measure-text: 65ch;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --section-padding-desktop: 112px;
  --section-padding-tablet: 80px;
  --section-padding-mobile: 64px;
}

:root {
  --container-max: 1440px;
  --container-content: 1280px;
  --container-text: 760px;

  --page-padding-desktop: 48px;
  --page-padding-tablet: 32px;
  --page-padding-mobile: 20px;
  --page-padding: var(--page-padding-desktop);

  --grid-columns: 12; /* @kind other */
  --grid-gap: 24px;

  --header-height: 80px;
  --tap-target-min: 44px;
  --control-height: 48px;
  --control-height-lg: 52px;
  --control-height-sm: 40px;

  --z-header: 100; /* @kind other */
  --z-drawer: 200; /* @kind other */
  --z-modal: 300; /* @kind other */
}

@media (max-width: 1023px) { :root { --page-padding: var(--page-padding-tablet); } }
@media (max-width: 767px)  { :root { --page-padding: var(--page-padding-mobile); } }

:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 36px;
  --radius-pill: 999px;

  /* Role aliases — do not round everything to the maximum.
     Przyciski i pola są prostokątne: kafle materiałów, reguły nad kolumnami
     i tabele parametrów mają ostre krawędzie, więc zaokrąglona kontrolka
     wyglądała jak wtręt z innego systemu. Zmiana tych dwóch wartości
     zaokrągla wszystkie kontrolki naraz. */
  --radius-button: var(--radius-pill); /* @kind other */
  --radius-field: 0px;
  --radius-card: 16px;
  --radius-media: 24px;
  --radius-media-lg: 36px;
  --radius-tag: var(--radius-pill);

  --border-width: 1px;
  --border-width-strong: 1.5px;
}

:root {
  --shadow-sm: 0 4px 14px rgba(15, 24, 34, 0.05);
  --shadow-md: 0 12px 30px rgba(15, 24, 34, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 24, 34, 0.11);
  --shadow-none: none;

  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-header: 0 1px 0 var(--color-neutral-200);
  --shadow-overlay: var(--shadow-lg);
  --focus-shadow: 0 0 0 3px rgba(30, 39, 46, 0.28);
}

:root {
  --duration-fast: 160ms; /* @kind other */
  --duration-default: 220ms; /* @kind other */
  --duration-slow: 420ms; /* @kind other */
  --ease-default: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */

  --transition-color: color var(--duration-fast) var(--ease-default), background-color var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default); /* @kind other */
  --transition-transform: transform var(--duration-default) var(--ease-default); /* @kind other */
  --reveal-offset: 16px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --duration-fast: 1ms; /* @kind other */ --duration-default: 1ms; /* @kind other */ --duration-slow: 1ms; /* @kind other */ --reveal-offset: 0px; }
}