/* ==========================================================================
   EnviSensor — Design Tokens
   Pojedyncze źródło prawdy dla kolorów, typografii, spacingu, cieni itd.
   Ładowane PRZED components.css. Nie nadpisuje treści — tylko zmienne.
   ========================================================================== */

:root {
  /* --- KOLORY: baza neutralna (czysta, w duchu Apple) --- */
  --bg:          #FFFFFF;   /* tło stron — czysta biel */
  --surface:     #FFFFFF;   /* karty, panele */
  --surface-2:   #F5F5F7;   /* sekcje wyróżnione (sygnaturowy szary) */
  --surface-3:   #FAFAFC;   /* delikatne tło naprzemienne */
  --line:        #E3E3E6;   /* obramowania, separatory */

  /* --- KOLORY: tekst --- */
  --ink:         #1D1D1F;   /* nagłówki, tekst główny (grafit) */
  --ink-2:       #424245;   /* tekst drugorzędny */
  --ink-muted:   #6E6E73;   /* podpisy, meta */
  --on-accent:   #FFFFFF;   /* tekst na akcencie */

  /* --- KOLORY: akcent (kontynuacja marki — sky) --- */
  --accent:      #0EA5E9;
  --accent-dark: #0284C7;
  --accent-soft: #E6F4FB;   /* tła chipów, ikon, hover */

  /* --- KOLORY: sygnały (ryzyko, alarmy, status) --- */
  --danger:      #E5484D;   /* "awaria chłodni = 80–200k PLN" */
  --danger-soft: #FCEBEC;
  --warn:        #F59E0B;
  --ok:          #16A34A;
  --ok-soft:     #E7F6ED;

  /* --- KOLORY: hero / sekcje ciemne (gdy potrzebne) --- */
  --ink-on-dark:     #FFFFFF;
  --ink-on-dark-2:   rgba(255,255,255,.72);
  --dark-bg:         #0F1115;

  /* --- TYPOGRAFIA --- */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Skala rozmiarów (clamp = responsywne bez media queries) — odważniejsza, w duchu Apple */
  --fs-xs:   0.75rem;    /* 12px */
  --fs-sm:   0.875rem;   /* 14px */
  --fs-base: 1.0625rem;  /* 17px — body jak Apple */
  --fs-lg:   1.1875rem;  /* 19px */
  --fs-xl:   clamp(1.3rem, 1.05rem + 1vw, 1.6rem);     /* 21→26 lead */
  --fs-2xl:  clamp(1.6rem, 1.1rem + 2vw, 2.25rem);     /* 26→36 */
  --fs-3xl:  clamp(2rem, 1.3rem + 3vw, 3.25rem);       /* 32→52 */
  --fs-4xl:  clamp(2rem, 1.1rem + 4.6vw, 4.75rem);     /* 35(mobile)→76 H1 hero */

  --lh-tight:   1.05;
  --lh-snug:    1.1;
  --lh-normal:  1.5;

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

  --tracking-tight:   -0.022em;  /* nagłówki */
  --tracking-tighter: -0.035em;  /* wielki hero H1 */

  /* --- SPACING (skala 4px) --- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;   /* oddech sekcji w duchu Apple */

  /* --- PROMIENIE --- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;   /* karty editorial (CONNECTIQ) */
  --radius-pill: 999px;

  /* --- CIENIE (miękkie, jasna baza) --- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 4px 16px rgba(0,0,0,.05);
  --shadow-md: 0 12px 36px rgba(0,0,0,.07);
  --shadow-lg: 0 30px 70px rgba(0,0,0,.10);

  /* --- TRANSITIONS --- */
  --t-fast:  120ms ease;
  --t-base:  200ms ease;
  --t-slow:  320ms cubic-bezier(.2,.7,.2,1);

  /* --- BREAKPOINTY (referencja dla media queries) --- */
  --bp-sm:  640px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;

  /* --- LAYOUT --- */
  --container-max: 1200px;
}