/* =========================================================================
   O! Grafik — Design Tokens v1.0
   Źródło prawdy dla kolorów, typografii, odstępów, zaokrągleń, szkła i ruchu.
   Opis i zasady użycia: DESIGN.md. Ten plik ładuje się PRZED components.css.
   Motyw: wyłącznie ciemny. Prefiks wszystkich zmiennych: --og-
   ========================================================================= */

/* ---------- Fonty (self-hosted, woff2, latin + latin-ext dla polskich znaków) ---------- */
/* Ścieżki względem pliku CSS motywu. Tylko 3 pliki — nie dodawać kolejnych grubości. */
:root {
  color-scheme: dark;

  /* ---------- Kolor: tło i powierzchnie (tonalna głębia, bez cieni) ---------- */
  --og-canvas: #000000;          /* tło strony */
  --og-surface-1: #0c0c0e;       /* sekcje alternatywne, stopka, pola formularzy */
  --og-surface-2: #1c1c1e;       /* karty */
  --og-surface-3: #2c2c2e;       /* karta w stanie hover, elementy uniesione */
  --og-surface-4: #3a3a3c;       /* tor przełącznika, mocne obramowania */

  /* ---------- Kolor: tekst (kontrast WCAG podany w DESIGN.md) ---------- */
  --og-text-1: #f5f5f7;          /* nagłówki, tekst główny */
  --og-text-2: #d2d2d7;          /* akapity, opisy */
  --og-text-3: #a1a1a6;          /* meta, podpisy (nie na surface-4) */
  --og-text-4: #86868b;          /* tylko na canvas / surface-1 / surface-2 */
  --og-text-on-blue: #ffffff;

  /* ---------- Kolor: marka (paleta niebieska) ---------- */
  --og-blue: #0a84ff;            /* akcent marki: ikony, poświaty, gradient, wskaźniki */
  --og-blue-light: #3395ff;      /* linki w tekście */
  --og-cyan: #64d2ff;            /* eyebrow, focus ring, koniec gradientu */
  --og-blue-fill: #0071e3;       /* wypełnienie przycisku głównego (biały tekst = 4.70:1) */
  --og-blue-fill-pressed: #0066cc;
  --og-blue-tint: rgba(10, 132, 255, 0.14);   /* tła chipów, ikon usług */
  --og-blue-tint-strong: rgba(10, 132, 255, 0.24);

  --og-gradient-brand: linear-gradient(92deg, #0a84ff 0%, #64d2ff 100%);
  --og-gradient-logo: linear-gradient(100deg, #0a84ff 0%, #64d2ff 100%);

  /* ---------- Kolor: linie ---------- */
  --og-line-1: rgba(255, 255, 255, 0.06);     /* subtelny podział, krawędź karty */
  --og-line-2: rgba(255, 255, 255, 0.12);     /* obramowanie pól, ghost button */
  --og-line-3: rgba(255, 255, 255, 0.22);     /* hover obramowania */

  /* ---------- Kolor: stany (tylko formularze i komunikaty) ---------- */
  --og-error: #ff6961;           /* tekst i obrys błędu (≥4.9:1 na surface-3) */
  --og-success: #30d158;
  --og-warning: #ffd60a;

  /* ---------- Tło strony: poświaty (z ografik.pl) ---------- */
  --og-bg-glow:
    radial-gradient(56rem 38rem at 18% 3%, rgba(10, 132, 255, 0.2), transparent 68%),
    radial-gradient(68rem 44rem at 92% 22%, rgba(100, 210, 255, 0.07), transparent 68%),
    radial-gradient(56rem 44rem at 6% 46%, rgba(10, 132, 255, 0.09), transparent 68%),
    radial-gradient(62rem 44rem at 95% 68%, rgba(10, 132, 255, 0.08), transparent 68%),
    radial-gradient(75rem 50rem at 50% 100%, rgba(100, 210, 255, 0.06), transparent 70%);
  --og-bg-glow-mobile:
    radial-gradient(120vw 70vh at 10% 0%, rgba(10, 132, 255, 0.2), transparent 70%),
    radial-gradient(120vw 80vh at 100% 60%, rgba(10, 132, 255, 0.08), transparent 70%);

  /* ---------- Typografia ---------- */
  --og-font-display: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --og-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Skala płynna: 360px → 1440px szerokości ekranu (identycznie w theme.json) */
  --og-fs-display: clamp(2.5rem, 1.667rem + 3.704vw, 5rem);        /* 40 → 80 */
  --og-fs-h1: clamp(2.25rem, 1.667rem + 2.593vw, 4rem);            /* 36 → 64 */
  --og-fs-h2: clamp(1.75rem, 1.333rem + 1.852vw, 3rem);            /* 28 → 48 */
  --og-fs-h3: clamp(1.375rem, 1.208rem + 0.7407vw, 1.875rem);      /* 22 → 30 */
  --og-fs-h4: clamp(1.1875rem, 1.125rem + 0.2778vw, 1.375rem);     /* 19 → 22 */
  --og-fs-lead: clamp(1.0625rem, 0.9792rem + 0.3704vw, 1.3125rem); /* 17 → 21 */
  --og-fs-body: clamp(1rem, 0.9792rem + 0.09259vw, 1.0625rem);     /* 16 → 17 */
  --og-fs-small: 0.875rem;                                         /* 14 */
  --og-fs-caption: 0.8125rem;                                      /* 13 — eyebrow, meta */
  --og-fs-micro: 0.75rem;                                          /* 12 — tylko noty prawne */

  --og-lh-display: 1.05;
  --og-lh-heading: 1.12;
  --og-lh-h3: 1.2;
  --og-lh-body: 1.55;
  --og-lh-tight: 1.3;

  --og-ls-display: -0.025em;     /* im większy font, tym ciaśniej (zasada Apple) */
  --og-ls-h1: -0.022em;
  --og-ls-h2: -0.018em;
  --og-ls-h3: -0.012em;
  --og-ls-h4: -0.006em;
  --og-ls-eyebrow: 0.08em;

  --og-measure: 65ch;            /* maks. długość linii akapitu */

  /* ---------- Odstępy (baza 4px) ---------- */
  --og-space-1: 0.25rem;   /* 4 */
  --og-space-2: 0.5rem;    /* 8 */
  --og-space-3: 0.75rem;   /* 12 */
  --og-space-4: 1rem;      /* 16 */
  --og-space-5: 1.25rem;   /* 20 */
  --og-space-6: 1.5rem;    /* 24 */
  --og-space-8: 2rem;      /* 32 */
  --og-space-10: 2.5rem;   /* 40 */
  --og-space-12: 3rem;     /* 48 */
  --og-space-16: 4rem;     /* 64 */
  --og-space-20: 5rem;     /* 80 */
  --og-space-24: 6rem;     /* 96 */
  --og-space-32: 8rem;     /* 128 */

  --og-section-y: clamp(4rem, 2.833rem + 5.185vw, 7.5rem);  /* 64 → 120: pion między sekcjami */
  --og-gutter: clamp(1rem, 0.5rem + 2.222vw, 2.5rem);       /* 16 → 40: margines boczny */
  --og-gap: clamp(0.75rem, 0.5rem + 1.111vw, 1.5rem);       /* 12 → 24: odstęp siatki */
  --og-stack: clamp(1.5rem, 1.167rem + 1.481vw, 2.5rem);    /* 24 → 40: rytm w sekcji */

  /* ---------- Kontenery ---------- */
  --og-container: 75rem;         /* 1200 — sekcje standardowe */
  --og-container-wide: 90rem;    /* 1440 — galerie, hero */
  --og-container-text: 45rem;    /* 720 — artykuły bloga */

  /* ---------- Zaokrąglenia ---------- */
  --og-r-xs: 0.5rem;                                      /* 8 — małe badge, miniatury w listach */
  --og-r-sm: 0.75rem;                                     /* 12 — checkbox, małe elementy */
  --og-r-md: 1rem;                                        /* 16 — pola formularzy, menu */
  --og-r-card: clamp(1.25rem, 1.083rem + 0.7407vw, 1.75rem); /* 20 → 28 — karty, media */
  --og-r-panel: clamp(1.5rem, 1.25rem + 1.111vw, 2.25rem);   /* 24 → 36 — duże panele, hero media */
  --og-r-pill: 999px;                                     /* przyciski, nawigacja, chipy, przełączniki */

  /* ---------- Rozmiary kontrolek ---------- */
  --og-tap: 2.75rem;             /* 44px — minimalne pole dotyku */
  --og-control-sm: 2.25rem;      /* 36 — tylko precyzyjny wskaźnik (mysz) */
  --og-control-md: 2.75rem;      /* 44 */
  --og-control-lg: 3.25rem;      /* 52 */
  --og-header-h: 3.5rem;         /* 56 mobile; 64 od 64em (nadpisane niżej) */
  --og-header-offset: 0.5rem;    /* odsunięcie pływającego menu od krawędzi */

  /* ---------- Szkło (tylko elementy pływające, patrz DESIGN.md §8) ---------- */
  --og-glass-bg: linear-gradient(rgba(30, 30, 34, 0.66), rgba(16, 16, 20, 0.58));
  --og-glass-bg-solid: rgba(22, 22, 26, 0.94);           /* fallback bez backdrop-filter */
  --og-glass-blur: 16px;                                 /* mobile; 22px od 64em */
  --og-glass-saturate: 1.6;
  --og-glass-edge:
    inset 1px 1px 0 rgba(255, 255, 255, 0.22),
    inset -1px -1px 0 rgba(255, 255, 255, 0.06);
  --og-glass-btn-bg: linear-gradient(rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.05));
  --og-glass-btn-blur: 14px;
  /* Sygnaturowa „ciekła” krawędź — maks. 1 element na ekran */
  --og-liquid-edge: linear-gradient(160deg,
    rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.1) 32%,
    rgba(10, 132, 255, 0.14) 62%, rgba(100, 210, 255, 0.6) 100%);

  /* ---------- Fokus ---------- */
  --og-focus-ring: 0 0 0 2px var(--og-canvas), 0 0 0 4px var(--og-cyan);

  /* ---------- Ruch ---------- */
  --og-dur-fast: 150ms;          /* kolor, opacity przy hover */
  --og-dur-base: 250ms;          /* przyciski, przełącznik */
  --og-dur-slow: 450ms;          /* wskaźnik segmentów, menu */
  --og-dur-reveal: 700ms;        /* pojawianie się przy przewijaniu */
  --og-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --og-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --og-reveal-distance: 1rem;    /* 16px mobile; 24px od 48em */
  --og-stagger: 60ms;

  /* ---------- Warstwy ---------- */
  --og-z-sticky: 100;
  --og-z-header: 200;
  --og-z-dropdown: 300;
  --og-z-overlay: 1000;
  --og-z-toast: 1100;

  /* ---------- Breakpointy (do dokumentacji; w @media używamy wartości em) ----------
     sm 30em (480)  · md 48em (768)  · lg 64em (1024)  · xl 80em (1280)  · 2xl 100em (1600) */
}

@media (min-width: 48em) {
  :root { --og-reveal-distance: 1.5rem; }
}
@media (min-width: 64em) {
  :root {
    --og-header-h: 4rem;
    --og-header-offset: 0.75rem;
    --og-glass-blur: 22px;
  }
}

/* Ograniczony ruch: zero przesunięć, tylko natychmiastowe zmiany */
@media (prefers-reduced-motion: reduce) {
  :root {
    --og-dur-fast: 0ms;
    --og-dur-base: 0ms;
    --og-dur-slow: 0ms;
    --og-dur-reveal: 0ms;
    --og-reveal-distance: 0px;
    --og-stagger: 0ms;
  }
}

/* Ograniczona przezroczystość (ustawienie systemowe): szkło staje się pełne */
@media (prefers-reduced-transparency: reduce) {
  :root { --og-glass-bg: var(--og-glass-bg-solid); --og-glass-blur: 0px; }
}