/* ============================================================
   FORMA · Dell'Oro Group — design tokens (kanon)
   Skórka: „Szałwia · papier". Jedno źródło prawdy dla barwy,
   typografii, odstępów, promieni, cieni i ruchu.
   Źródła wizualne: „Forma - System barwy.html" + „… typograficzny.html".
   Wklej :root do swojego projektu i buduj z tych zmiennych.
   ============================================================ */

:root{
  /* ---------- FONTY (3 role) ---------- */
  --man:'Manrope',system-ui,-apple-system,sans-serif;   /* UI / body / formularze */
  --disp:'Bricolage Grotesque',var(--man);              /* display / tytuły — punktowo */
  --mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace; /* dane, cyfry, etykiety */

  /* ---------- POWIERZCHNIE ---------- */
  --paper:#f6f4ec;     /* tło aplikacji (zwykle gradient — patrz niżej) */
  --paper-lt:#fbf7ee;  /* ton pośredni: sekcja / panel / hover na papierze */
  --card:#fffefb;      /* karty, panele, pola formularzy */
  --band:#cdd7c5;      /* belki pełnego bleedu: hero, stopka loginu, kursy */
  --code-bg:#222a1f;   /* warstwa ciemna: topbar, stopka panelu */

  /* gradient tła aplikacji (ciepły krem) */
  --bg-app:radial-gradient(130% 120% at 32% 8%, #faf6ec 0%, #f4efe1 52%, #efe9d8 100%);

  /* ---------- ATRAMENT + DRABINA KRYCIA ----------
     Jeden kolor tekstu, sześć rung. Hierarchia z alfy, nie z nowych szarości. */
  --navy:#27302a;                 /* 100% — tytuły, nazwy wyrobów */
  --ink60:rgba(39,48,42,.58);     /* 58%  — body wtórne, podpisy */
  --ink42:rgba(39,48,42,.40);     /* 40%  — placeholdery, ikony spoczynku */
  --ink22:rgba(39,48,42,.20);     /* 20%  — ramki pól, obrysy wtórne */
  --ink12:rgba(39,48,42,.10);     /* 10%  — hairline, linie list */
  --ink06:rgba(39,48,42,.05);     /* 5%   — tła hoveru, tła tokenów */

  /* ---------- AKCENTY + STANY ---------- */
  --zielen:#2f7d6b;    /* interakcja: focus inputu, link aktywacyjny, OK */
  --gold:#8a6c2f;      /* nawigacja: kickery, badge, znaczniki statusu */
  --gold-hi:#9a6f1c;   /* jaśniejsze złoto: hover / echo znaku */
  --btn:#2a3328;       /* przycisk główny (pełny atrament) */
  --rust:#b5532e;      /* negatyw / błąd / należność — oszczędnie */

  /* statusy (rodzina złota; kropka zawsze złota, odcień tekstu różnicuje stan) */
  --status-green:#6f5618;  /* w toku / OK */
  --status-amber:#7d5916;  /* czeka / uwaga */

  /* ---------- TEKST NA CIEMNYM (pochodne z --code-ink) ---------- */
  --code-ink:#d6dcc6;                                              /* 100% krem */
  --tick-cream:color-mix(in srgb, var(--code-ink) 66%, transparent);     /* etykiety, wtórne */
  --tick-cream-dim:color-mix(in srgb, var(--code-ink) 42%, transparent); /* podpisy, separatory */
  --tick-line:color-mix(in srgb, var(--code-ink) 15%, transparent);      /* hairline na ciemnym */

  /* na ciemnym tle wartości lekko rozjaśniamy w stronę papieru, by trzymać kontrast */
  --on-dark-rust:color-mix(in srgb, var(--rust) 62%, #f6f4ec);   /* należność na topbarze */
  --on-dark-green:color-mix(in srgb, var(--zielen) 60%, #f6f4ec);/* nadpłata na topbarze */

  /* ---------- TYPOGRAFIA · skala (desktop → mobile przez clamp) ----------
     Display/H1/Card/Row Bricolage; Body/Caption Manrope; Label/Data/Micro Geist Mono. */
  --fs-display:clamp(30px, 5vw, 46px);    /* lh 1.02 · wejście, splash, hero loginu */
  --fs-h1:clamp(26px, 3.4vw, 36px);       /* lh 1.05 · tytuł ekranu */
  --fs-card:clamp(22px, 2.6vw, 28px);     /* lh 1.10 · nagłówek karty/dokumentu */
  --fs-row:clamp(19px, 1.65vw, 22px);     /* lh 1.05 · tytuł wiersza/pozycji menu */
  --fs-body:15px;                          /* lh 1.60 · akapity, formularze (mobile 14px) */
  --fs-caption:13px;                       /* lh 1.50 · meta, podpisy (mobile 12px) */
  --fs-label:11px;                         /* lh 1.0  · kickery, etykiety CAPS, ls .14–.24em */
  --fs-data:clamp(15px, 1.2vw, 17px);     /* lh 1.20 · wagi, próby, kursy, salda (tabular) */
  --fs-micro:10px;                         /* lh 1.40 · tokeny, hex, znaczniki techniczne */

  /* ---------- ODSTĘPY (jedna skala — wszystko z niej) ---------- */
  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px;
  --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px;

  /* ---------- PROMIENIE ---------- */
  --r-xs:7px;     /* chipy, tagi */
  --r-sm:11px;    /* małe przyciski / linki topbara */
  --r-md:12px;    /* wiersze list, hover-karty */
  --r-lg:14px;    /* przyciski główne, pola */
  --r-xl:16px;    /* karty, panele */
  --r-2xl:18px;   /* duże karty */
  --r-pill:999px; /* pigułki, badge, statusy */

  /* ---------- CIENIE ---------- */
  --shadow-row:0 8px 20px -16px rgba(39,48,42,.26);  /* uniesienie wiersza na hoverze */
  --shadow-card:0 14px 30px -26px rgba(39,48,42,.5); /* karta / panel */
  --shadow-cta:0 16px 32px -16px rgba(39,48,42,.5);  /* przycisk główny */

  /* ---------- RUCH (jeden język: dwa easingi, pięć czasów) ---------- */
  --ease:cubic-bezier(.2,.7,.2,1);  /* przemieszczenia, wjazdy */
  --ease-color:ease;                /* barwa, krycie, obrys */
  --t-snap:150ms;   /* mikro: przyciski, linki, hover koloru */
  --t-move:200ms;   /* ikony, strzałka, uniesienie wiersza */
  --t-focus:350ms;  /* podkreślenie inputu (scaleX) */
  --t-fade:600ms;   /* zmiana treści: fakty, odsłony */
  --t-scene:1200ms; /* sceny: intro, loader „Formujemy panel" */

  /* ---------- UKŁAD ---------- */
  --container:1280px;                 /* kanoniczny kontener desktopu */
  --gutter:clamp(22px, 4vw, 46px);    /* margines/padding kontenera */
}

/* ============================================================
   BREAKPOINTY (świadome wystopniowanie PC → mobile)
   desktop  : ≥ 1024px  — pełna siatka, pełna skala typografii
   tablet   : 720–1023  — kolumny się składają, skala schodzi o krok
   mobile   : < 720px   — jedna kolwna, najmniejsze stopnie skali
   Ekrany użyte w prototypie: menu łamie się na 880, login na 780,
   księgi na 820/600/720. Przy przeszczepie ujednolić do 1024/720.
   ============================================================ */

/* ---------- KRUSZCE — barwy materiałowe (referencja, NIE UI) ----------
   Z nich wychodzi akcent złoty (--gold = przygaszone złoto 585).
   Zasada stopu: wyższa próba → cieplejszy/bardziej nasycony kolor. */
:root{
  --au-333:#cbbe8e; --au-585:#dcc067; --au-750:#e4ba4a; --au-999:#e9b11c;
  --au-rose-585:#e0a78e; --au-white-750:#d9d7cf; --au-pd-750:#8d8e89;
  --ag-999:#dbdddb; --pt-999:#c9ccd0; --pd-999:#8f9195; /* srebro → platyna → pallad */
}