/* GMEREK IT — rdzeń systemu
   Jeden plik, wszystkie tokeny. Identyczny na każdej stronie z rodziny.
   Trójka akcentu jest wydzielona na końcu i to JEDYNA rzecz, którą podmienia
   strona produktowa — przez dołączenie pliku assets/css/theme-<produkt>.css
   PO tym pliku.

   Kolejność wpięcia:
     <link rel="stylesheet" href="assets/css/tokens.css">
     <link rel="stylesheet" href="assets/css/theme-litari.css">
     <link rel="stylesheet" href="assets/css/motion.css">
*/

:root{
  /* ---------- Powierzchnie ---------- */
  --white:    #FFFFFF;   /* tło strony i karty */
  --cream:    #FBFBFD;   /* pas oddechu między sekcjami */
  --cream-2:  #F5F5F7;   /* trzeci poziom, oszczędnie */

  /* ---------- Marka ---------- */
  --navy-900: #0B1B2E;   /* hero, stopka, pasek górny */
  --navy-800: #12293F;   /* karty ciemne, pasma produktowe */
  --navy-700: #1B3A57;   /* obramowania i stany na ciemnym */
  --ink-deep: #0B1B2E;   /* powierzchnia wariantu ciemnego */

  /* ---------- Tekst ---------- */
  --ink:      #14202E;   /* tekst podstawowy, 16.46:1 na bieli */
  --gray:     #6B7280;   /* tekst wtórny, 4.83:1 */
  --line:     #E8E6E0;   /* linie i obramowania */
  --hairline: rgba(11,27,46,.08);

  /* ---------- Znak graficzny ---------- */
  --mark:      #E8431F;  /* 4.00:1 na bieli: linie, ramki, ikony, nagłówki 24px+ */
  --mark-text: #D13C1C;  /* 4.80:1 — vermilion niosący tekst poniżej 24px */

  /* ---------- Typografia ---------- */
  --font-display: "Archivo Variable";
  --font-text:    "Geist Sans";
  --font-mono:    "JetBrains Mono";

  /* skala krokiem √φ = 1.272; co drugi stopień jest dokładnie φ */
  --t-2:  0.775rem;  /* 12.4 */
  --t-1:  0.988rem;  /* 15.8 */
  --t0:   1rem;      /* 16.0 */
  --t1:   1.256rem;  /* 20.1 */
  --t2:   1.600rem;  /* 25.6 */
  --t3:   2.031rem;  /* 32.5 */
  --t4:   2.588rem;  /* 41.4 */
  --t5:   3.288rem;  /* 52.6 */
  --t6:   4.181rem;  /* 66.9 */

  --lh-body:    1.618;
  --lh-display: 1.272;

  /* ---------- Odstępy: Fibonacci, nic poza listą ---------- */
  --s1:   4px;
  --s2:   8px;
  --s3:  13px;
  --s4:  21px;
  --s5:  34px;
  --s6:  55px;
  --s7:  89px;
  --s8: 144px;

  /* ---------- Promienie ---------- */
  --r-s:   4px;
  --r-m:   8px;
  --r-l:  13px;
  --r-xl: 21px;

  /* ---------- Wypukłość: trzy poziomy ---------- */
  --e1: 0 1px 2px rgba(11,27,46,.05);
  --e2: 0 1px 2px rgba(11,27,46,.05), 0 8px 24px rgba(11,27,46,.05);
  --e3: 0 1px 2px rgba(11,27,46,.06), 0 21px 55px rgba(11,27,46,.10);

  /* ---------- Proporcja ---------- */
  --phi:       1.6180339887;
  --phi-major: 61.8;
  --phi-minor: 38.2;
  --measure:   38ch;     /* miara kolumny tekstu: szerokość / φ */

  /* ---------- Siatka ---------- */
  --maxw:  1180px;
  --nav-h:   55px;

  /* ---------- Krzywe ---------- */
  --m-ease:   cubic-bezier(.2,.8,.2,1);
  --m-soft:   cubic-bezier(.16,1,.3,1);
  --m-spring: cubic-bezier(.34,1.4,.64,1);
}

/* ============================================================
   TRÓJKA AKCENTU — jedyny blok, który podmienia strona produktu
   ============================================================
   Wartości poniżej to wariant hub (gmerek.at). Strona produktowa
   NIE edytuje tego bloku — dołącza theme-<produkt>.css po tym pliku.

   Reguły, które przetrwają każdą podmianę:
   - hover idzie CIEMNIEJ, nigdy jaśniej
   - akcent nigdy jako tło pod małym tekstem
   - --mark #E8431F zostaje wspólny na wszystkich stronach
   ============================================================ */
:root{
  --accent:       #0D5EAF;  /* 6.49:1 na bieli */
  --accent-hover: #0A4B8C;  /* 8.76:1 na bieli */
  --accent-light: #7AA6D3;  /* 6.79:1 na navy-900 */
  --accent-on:    #FFFFFF;

  /* sieć węzłów w hero czyta te trzy, więc podmiana motywu ją przemalowuje */
  --net-line: rgba(122,166,211,.20);
  --net-node: rgba(122,166,211,.55);
  --net-hot:  #E8431F;
}