/*
 * ZESTAW MARKI podatki.pro — tokeny kolorów, czcionek i kształtów.
 *
 * Plik jest celowo NIEZALEŻNY od Tailwinda (zwykłe zmienne CSS z wartościami
 * wpisanymi wprost), żeby dało się go skopiować 1:1 do Strefy klienta
 * (aplikacja .NET, `ClientLayout`) — wspólny ma być wygląd, nie kod.
 * Witryna mapuje te zmienne na klasy Tailwinda w globals.css (`@theme inline`).
 *
 * Tokeny w :root to styl „PAPIER” (wzór: fin.ai); od 28.09.2026 domyślny jest
 * jednak „SIATKA” (layout.tsx ustawia data-styl="siatka", niżej). Papier: ciepłe, papierowe
 * tło; cienkie nagłówki szeryfowe; czarne przyciski z małym zaokrągleniem;
 * pomarańczowy akcent. Linki mają odcień ciemniejszy od akcentu dekoracyjnego —
 * czysty #ff5600 na jasnym tle nie spełnia wymogu kontrastu dla tekstu.
 *
 * Tryb ciemny: klasa `.dark` na <html>; styl i kolor akcentu: atrybuty
 * data-styl i data-akcent. Ustawia je skrypt z src/lib/wyglad.ts według
 * ciasteczka `pp-wyglad` (domena .podatki.pro) — Strefa klienta może czytać
 * to samo ciasteczko i przełączać te same atrybuty.
 */

:root {
  /* Powierzchnie */
  --pp-tlo: #faf9f6;
  --pp-tlo-2: #f1eee9;                     /* tło kart, pasów, pól */
  /* Tekst */
  --pp-tekst: #111111;
  --pp-tekst-2: #55524c;                   /* tekst drugiego planu */
  --pp-tekst-3: #857f75;                   /* etykiety, podpisy */
  /* Linie siatki (cienkie, półprzezroczyste) */
  --pp-linia: rgb(17 17 17 / 0.08);
  --pp-linia-mocna: rgb(17 17 17 / 0.15);
  /* Akcent */
  --pp-akcent: #c2410c;                    /* linki */
  --pp-akcent-jasny: #ff5600;              /* wyróżnienia, znak */
  --pp-akcent-tlo: rgb(255 86 0 / 0.08);
  /* Przycisk główny */
  --pp-przycisk: #111111;
  --pp-przycisk-hover: #333333;
  --pp-przycisk-tekst: #ffffff;
}

.dark {
  --pp-tlo: #141312;
  --pp-tlo-2: rgb(255 255 255 / 0.035);
  --pp-tekst: #f4f1ec;
  --pp-tekst-2: #b3ada3;
  --pp-tekst-3: #8a857c;
  --pp-linia: rgb(255 255 255 / 0.1);
  --pp-linia-mocna: rgb(255 255 255 / 0.16);
  --pp-akcent: #ff7a33;
  --pp-akcent-jasny: #ff5600;
  --pp-akcent-tlo: rgb(255 86 0 / 0.12);
  --pp-przycisk: #f4f1ec;
  --pp-przycisk-hover: #ffffff;
  --pp-przycisk-tekst: #111111;
}

/*
 * Czcionki (licencja OFL, Google Fonts; witryna ładuje je przez next/font):
 *   Inter — tekst; cechy cv02/cv03/cv04 (otwarte cyfry 4, 6, 9 — czytelniejsze
 *           kwoty) i cv11 (jednopiętrowe „a”), jak na tailwindcss.com,
 *   Newsreader — nagłówki (krój zmienny z osią rozmiaru optycznego),
 *   IBM Plex Mono — liczby, etykiety, kod.
 */
:root {
  --pp-font-sans: var(--font-inter, "Inter"), ui-sans-serif, system-ui, sans-serif;
  --pp-font-mono: var(--font-plex-mono, "IBM Plex Mono"), ui-monospace, SFMono-Regular, Menlo, monospace;
  --pp-font-cechy: "cv02", "cv03", "cv04", "cv11";
  /* Nagłówki (h1, h2 sekcji) i śródtytuły w treści */
  --pp-font-naglowki: var(--font-newsreader, "Newsreader"), ui-serif, Georgia, serif;
  --pp-waga-naglowkow: 300;
  --pp-swiatlo-naglowkow: -0.035em;
  --pp-waga-srodtytulow: 400;
  /* Kształt */
  --pp-promien-przycisku: 4px;
}

/* ==========================================================================
 * STYL „SIATKA” (wzór: tailwindcss.com) — DOMYŚLNY od 28.09.2026 (decyzja
 * właściciela). Włącza go data-styl="siatka" na <html> (layout.tsx; odwiedzający
 * może wybrać „papier” w panelu wyglądu). Wartości = paleta Tailwinda 4.
 * ========================================================================== */
[data-styl="siatka"] {
  --pp-tlo: #ffffff;
  --pp-tlo-2: oklch(98.5% 0.002 247.839);            /* gray-50 */
  --pp-tekst: oklch(13% 0.028 261.692);              /* gray-950 */
  --pp-tekst-2: oklch(44.6% 0.03 256.802);           /* gray-600 */
  --pp-tekst-3: oklch(55.1% 0.027 264.364);          /* gray-500 */
  --pp-linia: oklch(13% 0.028 261.692 / 0.05);
  --pp-linia-mocna: oklch(13% 0.028 261.692 / 0.1);
  --pp-akcent: oklch(58.8% 0.158 241.966);           /* sky-600 */
  --pp-akcent-jasny: oklch(68.5% 0.169 237.323);     /* sky-500 */
  --pp-akcent-tlo: oklch(97.7% 0.013 236.62);        /* sky-50 */
  --pp-przycisk: oklch(13% 0.028 261.692);           /* gray-950 */
  --pp-przycisk-hover: oklch(27.8% 0.033 256.848);   /* gray-800 */
  --pp-przycisk-tekst: #ffffff;

  --pp-font-naglowki: var(--pp-font-sans);
  --pp-waga-naglowkow: 500;
  --pp-swiatlo-naglowkow: -0.04em;
  --pp-waga-srodtytulow: 600;
  --pp-promien-przycisku: 9999px;
}

[data-styl="siatka"].dark {
  --pp-tlo: oklch(13% 0.028 261.692);                /* gray-950 */
  --pp-tlo-2: oklch(100% 0 0 / 0.025);
  --pp-tekst: #ffffff;
  --pp-tekst-2: oklch(70.7% 0.022 261.325);          /* gray-400 */
  --pp-tekst-3: oklch(55.1% 0.027 264.364);          /* gray-500 */
  --pp-linia: oklch(100% 0 0 / 0.1);
  --pp-linia-mocna: oklch(100% 0 0 / 0.15);
  --pp-akcent: oklch(74.6% 0.16 232.661);            /* sky-400 */
  --pp-akcent-jasny: oklch(74.6% 0.16 232.661);
  --pp-akcent-tlo: oklch(74.6% 0.16 232.661 / 0.1);
  --pp-przycisk: oklch(37.3% 0.034 259.733);         /* gray-700 */
  --pp-przycisk-hover: oklch(44.6% 0.03 256.802);    /* gray-600 */
  --pp-przycisk-tekst: #ffffff;
}

/* ==========================================================================
 * KOLORY AKCENTU (wybór odwiedzającego, jak palety na taxmachine.pl).
 * data-akcent na <html>; brak atrybutu = akcent własny stylu (papier —
 * pomarańczowy, siatka — niebieski). Reguły MUSZĄ stać po regułach stylów:
 * specyficzność jest ta sama, więc wygrywa późniejsza.
 *   --pp-akcent        linki (kontrast ≥ 4,5:1 na tle danego motywu)
 *   --pp-akcent-jasny  wyróżnienia, znak, liczby w krokach
 * ========================================================================== */
[data-akcent="niebieski"] {
  --pp-akcent: #0369a1;
  --pp-akcent-jasny: #0ea5e9;
  --pp-akcent-tlo: rgb(14 165 233 / 0.1);
}
[data-akcent="indygo"] {
  --pp-akcent: #4338ca;
  --pp-akcent-jasny: #6366f1;
  --pp-akcent-tlo: rgb(99 102 241 / 0.1);
}
[data-akcent="morski"] {
  --pp-akcent: #0f766e;
  --pp-akcent-jasny: #14b8a6;
  --pp-akcent-tlo: rgb(20 184 166 / 0.1);
}
[data-akcent="granatowy"] {
  --pp-akcent: #1e3a8a;
  --pp-akcent-jasny: #3b82f6;
  --pp-akcent-tlo: rgb(59 130 246 / 0.1);
}
[data-akcent="terakota"] {
  --pp-akcent: #c2410c;
  --pp-akcent-jasny: #ea580c;
  --pp-akcent-tlo: rgb(234 88 12 / 0.1);
}

.dark[data-akcent="niebieski"] {
  --pp-akcent: #38bdf8;
  --pp-akcent-jasny: #38bdf8;
  --pp-akcent-tlo: rgb(56 189 248 / 0.12);
}
.dark[data-akcent="indygo"] {
  --pp-akcent: #a5b4fc;
  --pp-akcent-jasny: #818cf8;
  --pp-akcent-tlo: rgb(129 140 248 / 0.12);
}
.dark[data-akcent="morski"] {
  --pp-akcent: #2dd4bf;
  --pp-akcent-jasny: #2dd4bf;
  --pp-akcent-tlo: rgb(45 212 191 / 0.12);
}
.dark[data-akcent="granatowy"] {
  --pp-akcent: #93c5fd;
  --pp-akcent-jasny: #60a5fa;
  --pp-akcent-tlo: rgb(96 165 250 / 0.12);
}
.dark[data-akcent="terakota"] {
  --pp-akcent: #fb923c;
  --pp-akcent-jasny: #f97316;
  --pp-akcent-tlo: rgb(249 115 22 / 0.12);
}