/* ============================================================
   ss-tokens.css | reklamacje.net.pl - Studio Reklamacje.net
   Jedyne zrodlo prawdy dla kolorow, typografii i odstepow.

   Warstwa tokenow wzorca www.softwarestudio.com.pl
   (assets/ss-tokens.css, stan 2026-09-09) bez aliasow --color-*,
   ktore dotycza arkusza bazy wiedzy wzorca - tej witryny nie maja.

   KOLEJNOSC: wczytywany PRZED vss.css i vss-article.css. Te arkusze
   nie maja juz wlasnego :root, wiec kaskada tokenow jest czysta.
   Kroje laduje osobny <link> do /google-fonts/css/reklamacje-pair.css
   - bez @import, bo lancuch importow opoznia wykrycie plikow krojow.
   ============================================================ */

:root {
  /* --- Granaty i tusz --- */
  --ss-ink:         #0c1320;
  --ss-ink-700:     #122036;
  --ss-navy:        #16243f;
  --ss-navy-600:    #1b2d4f;

  /* --- Pomaranczowy: trzy role, nie jeden kolor ---
     orange      : grafika, obramowania, akcent NA CIEMNYM (6,5:1 na #0c1320)
     orange-ink  : wypelnienia z bialym tekstem (5,2:1)
     orange-text : pomaranczowy TEKST na jasnym tle (5,8:1)
     #ff6a13 na bialym to 2,9:1 - nigdy jako tekst na jasnym tle. */
  --ss-orange:      #ff6a13;
  --ss-orange-ink:  #c2410c;
  --ss-orange-text: #b04304;
  --ss-orange-600:  #e85d09;
  --ss-orange-300:  #ff9a5c;
  --ss-amber:       #f59e1b;

  /* --- Niebieskie --- */
  --ss-blue:        #2b5fa3;
  --ss-blue-light:  #e9f1fc;

  /* --- Tekst --- */
  --ss-text:        #14202f;
  --ss-muted:       #5a6a7e;
  --ss-faint:       #64748b;   /* bylo #8a97a8 = 2,97:1 na bialym, teraz 4,8:1 */

  /* --- Powierzchnie --- */
  --ss-white:       #ffffff;
  --ss-bg-alt:      #f5f7fb;
  --ss-bg-warm:     #f8f6f3;
  --ss-border:      #e4e9f2;
  --ss-border-soft: #eef2f8;

  /* --- Stany --- */
  --ss-ok:          #1e7a3c;
  --ss-ok-300:      #4ade80;

  /* --- Kroje ---
     Quicksand w naglowkach, Nunito Sans w tresci - oba lokalnie, licencja OFL.
     Quicksand nie ma kursywy: <em> w naglowku dostaje font-style: normal
     i kolor akcentu (.hero h1 em, .section-title em), zamiast pochylenia
     syntetycznego. --f-mono to systemowy monospace: zero plikow. */
  --f-head: 'Quicksand', 'Segoe UI', system-ui, sans-serif;
  --f-body: 'Nunito Sans', 'Segoe UI', system-ui, sans-serif;
  --f-mono: ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'Segoe UI Mono', Consolas, 'Liberation Mono', monospace;

  /* --- Skala typograficzna (dol: 13 px) --- */
  --fs-label: .8125rem;                              /* 13 px - etykiety, znaczniki */
  --fs-sm:    .9375rem;                              /* 15 px - podpisy, meta */
  --fs-base:  1.0625rem;                             /* 17 px - tresc */
  --fs-lead:  1.1875rem;                             /* 19 px - lead pod naglowkiem */
  --fs-h3:    1.3125rem;                             /* 21 px */
  --fs-h2:    clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  --fs-h1:    clamp(2.125rem, 1.3rem + 3.6vw, 3.625rem);

  /* --- Odstepy --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Promienie, cienie, ruch --- */
  --r-sm: 8px; --r: 14px; --r-lg: 22px; --r-xl: 30px;
  --sh-sm: 0 1px 3px rgba(16,28,48,.06), 0 1px 2px rgba(16,28,48,.05);
  --sh:    0 8px 28px -12px rgba(16,28,48,.18);
  --sh-md: 0 18px 48px -18px rgba(16,28,48,.28);
  --sh-lg: 0 32px 70px -24px rgba(12,19,32,.40);
  --sh-orange: 0 16px 40px -16px rgba(194,65,12,.45);
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --t: .25s var(--ease);

  /* --- Cele dotykowe --- */
  --tap: 48px;
}

/* ============================================================
   TRYB CIEMNY - PRZYGOTOWANY, NIE WLACZONY.
   Kaskada tokenow jest juz czysta (jeden :root), ale komponenty
   w vss.css i vss-article.css maja jeszcze kolory zaszyte na
   sztywno: tlo naglowka rgba(255,255,255,.82), #fff w .fa-panel,
   .shot-bar .url, .table-scroll::after i w lightboxie z vss.js.
   Wlaczyc po przepisaniu ich na tokeny - wtedy wystarczy
   odkomentowac ponizszy blok.
   ============================================================
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --ss-white:       #111a2b;
    --ss-bg-alt:      #16243f;
    --ss-bg-warm:     #131d30;
    --ss-border:      #24344f;
    --ss-border-soft: #1c2a42;
    --ss-text:        #e8edf6;
    --ss-muted:       #a8b6c9;
    --ss-faint:       #8b9ab0;
    --ss-navy:        #dce5f2;
    --ss-navy-600:    #eef3fa;
    --ss-orange-text: #ff9a5c;
    --ss-orange-ink:  #e85d09;
    --ss-blue:        #7fb0ea;
    --ss-blue-light:  #16243f;
  }
}
============================================================ */