/* ============================================================
   TOKENY — jedyne źródło prawdy dla wartości wizualnych.
   W komponentach NIE wolno używać surowych hexów ani dowolnych
   pikseli. Wszystko przez var(--...). Dokumentacja: docs/DESIGN.md

   Paleta 2026-09: zbliżona do Certum (grafit + błękit), ale
   celowo o ton głębsza w akcencie — firmowy #00A3E0 daje na bieli
   kontrast 2,9:1 i nie nadaje się pod biały tekst w przycisku.
   ============================================================ */
:root{
  --c-brand-900:#0A4C74;
  --c-brand-700:#095E93;
  --c-brand-600:#0B76B8;
  --c-brand-500:#2E93D0;
  --c-brand-300:#7FBFE4;
  --c-brand-100:#D6E9F6;
  --c-brand-050:#EAF4FB;
  --c-brand-line:#D3E6F4;

  --c-ok-700:#0A6E4F;   --c-ok-100:#D8F3E8;
  --c-warn-700:#8A5A00; --c-warn-100:#FFF3DF; --c-warn-line:#F5D9A8;
  --c-err-700:#A02020;  --c-err-100:#FCE4E4;

  --c-ink:#231F20; --c-ink-2:#4A5560; --c-ink-3:#6B7480;
  --c-ink-inv:#FFFFFF; --c-ink-inv-2:#B7BBC0; --c-ink-inv-3:#8E9299;
  --c-line:#E1E5E9; --c-line-2:#C9D0D7; --c-line-dark:#3B3536;
  --c-bg:#FFFFFF; --c-bg-2:#F2F4F6; --c-bg-3:#E9EDF1; --c-bg-dark:#231F20;

  /* ── Kolory Certum (panel /panel) ──────────────────────────────
     Prosto ze strony certum.pl: błękit #00A3E0, grafit #231F20,
     pomarańcz #F28700, zieleń #00A04F, jasny błękit #E8F7FF.
     Firmowy błękit na bieli ma 2,9:1, więc pod biały tekst
     (przyciski, linki) idzie --c-cert-deep (5:1); czysty #00A3E0
     zostaje do akcentów: pasek aktywnej pozycji, ikony, obrysy. */
  --c-cert:#00A3E0;
  --c-cert-deep:#0077A8;
  --c-cert-deeper:#00618A;
  --c-cert-soft:#E8F7FF;
  --c-cert-line:#BCE4F7;
  --c-cert-orange:#F28700;
  --c-cert-green:#00A04F;

  /* Panel: jasne chłodne tło, szyna w grafitcie Certum. */
  --c-panel-bg:#F4F6F8; --c-panel-ink:#231F20;
  --c-rail:#231F20; --c-rail-active:#332E2F; --c-rail-hover:#2B2626; --c-rail-line:#3B3536;
  --c-rail-ink:#FFFFFF; --c-rail-ink-2:#C9C4C5; --c-rail-ink-3:#8C8587;
  --c-rail-accent:#00A3E0; --c-rail-warn:#FFB454; --c-rail-crit:#FF8A80;

  --f-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --t-xs:0.8125rem; --t-sm:0.875rem; --t-base:1rem; --t-lg:1.125rem;
  --t-xl:1.375rem;  --t-2xl:1.75rem; --t-3xl:2.25rem; --t-4xl:3rem; --t-5xl:3.875rem;
  --lh-tight:1.05; --lh-snug:1.35; --lh-base:1.6;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  --s-1:0.25rem; --s-2:0.5rem; --s-3:0.75rem; --s-4:1rem;
  --s-5:1.5rem; --s-6:2rem; --s-7:3rem; --s-8:4rem; --s-9:6rem;

  --r-sm:4px; --r-md:6px; --r-lg:8px; --r-full:999px;

  --sh-1:0 1px 2px rgba(35,31,32,.06);
  --sh-card:0 1px 2px rgba(35,31,32,.05),0 8px 24px -18px rgba(35,31,32,.35);
  --sh-2:0 4px 16px rgba(35,31,32,.09);
  --sh-3:0 20px 44px -26px rgba(35,31,32,.45);

  --m-fast:120ms; --m-base:200ms; --m-ease:cubic-bezier(.2,.7,.3,1);

  --w-page:75rem; --w-prose:44rem;
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}