/* Martia — design tokens. Jedyne źródło prawdy dla strony i Storybooka.

   Trzy warstwy, zawsze w tej kolejności:
   1. NEUTRALE   — kremowo-atramentowa oś, na której stoi cała strona.
   2. KOLORY     — cztery nazwane barwy, każda z własną rampą.
   3. SEMANTYKA  — role (--bg, --ink, --error…). Komponenty używają WYŁĄCZNIE tej warstwy.

   Rampy: każdy kolor ma dziesięć kroków. Sufiks `d` idzie ku Atramentowi
   (d20 → d80, coraz ciemniej), `l` ku Kremowi (l20 → l90, coraz jaśniej).
   Krok l90 istnieje dla teł komunikatów — na nim tekst w barwie bazowej
   zachowuje wymagany kontrast.
   Wszystkie rampy dzielą te same dwie kotwice, dlatego każdy krok każdej
   barwy wygląda na członka tej samej rodziny — także zmieszany z innym. */

:root {
  /* ── 1. NEUTRALE ─────────────────────────────────────────────
     Oś kremowa: papier, na którym leżą liczby. Nazwy opisują materiał,
     nie numer kroku — łatwiej o nich rozmawiać na review. */
  --biel: #ffffff;      /* karty, pola, segmenty nawigacji */
  --krem: #f9f8f5;      /* tło strony i tekst na ciemnych kadrach */
  --owsianka: #f3f0e8;  /* sekcje wyróżnione, pola nieaktywne */
  --len: #ebe8e1;       /* panele „Jak działa" */
  --pergamin: #eee9dd;  /* linie rozdzielające wiersze */
  --popiol: #e3ddcf;    /* obrysy kart i pól */
  --kamien: #cfc6b3;    /* obrys pola na hover */
  --zwir: #a89f8f;      /* kropki mapy, znaki wodne */
  --cien: #6b655b;      /* tekst drugoplanowy, etykiety */
  --sepia: #4a453d;     /* akapity na podstronach */
  --wegiel: #2e2a24;    /* ciemne powierzchnie */
  --atrament: #120c08;  /* tekst główny, przyciski, kolor prymarny */

  /* ── 2. KOLORY (rampa: d80…d20 · baza · l20…l90) ────────────── */

  /* Lisc — zieleń marki — wzrost, potwierdzenie, pieniądze, które zostają */
  --lisc-d80: #20260f;
  --lisc-d60: #2e3f16;
  --lisc-d40: #3c591e;
  --lisc-d20: #4a7225;
  --lisc: #588c2c;
  --lisc-l20: #78a254;
  --lisc-l40: #98b77c;
  --lisc-l60: #b9cda5;
  --lisc-l80: #d9e2cd;
  --lisc-l90: #e9ede1;

  /* Poświata — neonowa limonka: podświetlenie, liczba, która robi różnicę.
     Rodzina Liścia podkręcona do maksimum — akcent, nigdy powierzchnia. */
  --poswiata-d80: #3a3a1c;
  --poswiata-d60: #616830;
  --poswiata-d40: #899643;
  --poswiata-d20: #b0c457;
  --poswiata: #d8f26b;
  --poswiata-l20: #dff387;
  --poswiata-l40: #e5f4a2;
  --poswiata-l60: #ecf6be;
  --poswiata-l80: #f2f7d9;
  --poswiata-l90: #f6f7e7;




  /* Niebo — błękit — zaufanie, stopka, obrys skupienia */
  --niebo-d80: #243234;
  --niebo-d60: #365760;
  --niebo-d40: #497d8c;
  --niebo-d20: #5ba2b8;
  --niebo: #6dc8e4;
  --niebo-l20: #89d2e7;
  --niebo-l40: #a5dbeb;
  --niebo-l60: #c1e5ee;
  --niebo-l80: #ddeef2;
  --niebo-l90: #ebf3f3;




  /* Mak — czerwień — błąd, ubytek, kwota, która wypływa */
  --mak-d80: #351712;
  --mak-d60: #58231c;
  --mak-d40: #7a2e26;
  --mak-d20: #9d3a30;
  --mak: #c0453a;
  --mak-l20: #cb695f;
  --mak-l40: #d78d85;
  --mak-l60: #e2b0aa;
  --mak-l80: #eed4d0;
  --mak-l90: #f3e6e2;

  /* ── 3. SEMANTYKA — role. Tego używają komponenty. ───────────── */

  /* powierzchnie */
  --bg: var(--krem);
  --bg-tint: var(--owsianka);
  --surface: var(--biel);
  --stone-panel: var(--len);

  /* tekst */
  --ink: var(--atrament);
  --ink-muted: var(--cien);
  --ink-soft: var(--sepia);
  --cream-on-dark: var(--krem);
  --ink-on-blue: #0b3b4c;

  /* obrysy */
  --stone: var(--popiol);
  --stone-soft: var(--pergamin);
  --stone-strong: var(--kamien);

  /* akcenty */
  --blue: var(--niebo-l60);
  --blue-deep: var(--niebo);

  /* podświetlenie — jedna liczba lub jedna fraza na ekran; tekst zawsze atramentowy */
  --highlight: var(--poswiata);
  --highlight-ink: var(--atrament);

  /* statusy — kolor nigdy nie niesie znaczenia sam, zawsze z ikoną lub tekstem */
  --status-green: var(--lisc);
  --status-green-bg: var(--lisc-l90);
  /* zieleń dla tekstu: --status-green ma 4,04:1 na bieli, poniżej progu 4,5:1
     dla stopni < 18 pt. Ten krok rampy daje 5,37:1. Wypełnienia i obrysy
     zostają na --status-green (tam próg to 3:1). */
  --status-green-text: var(--lisc-d20);
  --status-blue: #54788d;
  --status-blue-bg: var(--niebo-l90);
  /* jak przy zieleni: tekst plakietki na własnym jasnym tle potrzebuje
     ciemniejszego kroku, żeby przejść 4,5:1 */
  --status-blue-text: var(--niebo-d60);
  --error: var(--mak);
  --error-bg: var(--mak-l90);

  /* interakcja */
  --ink-hover: #2a2118;

  /* powierzchnie specjalne */
  --phone-bezel: #0b0906;
  --map-dot: var(--kamien);

  /* ── Paleta wykresów ────────────────────────────────────────
     Serie nie są osobnymi barwami, tylko krokami ramp Liścia i Nieba.
     Każde dwie sąsiednie różnią się jasnością o ponad 10 punktów, więc
     wykres czyta się także w skali szarości i przy daltonizmie. */
  --viz-1: var(--lisc-d40);   /* L 8  */
  --viz-2: var(--lisc);       /* L 21 */
  --viz-3: var(--lisc-l40);   /* L 42 */
  --viz-4: var(--niebo-d20);  /* L 32 */
  --viz-5: var(--niebo);      /* L 50 */

  /* kategorie wydatków — stałe przypisanie, żeby ta sama kategoria
     miała ten sam kolor w każdym wykresie na stronie */
  --kat-dom: var(--viz-1);
  --kat-jedzenie: var(--viz-2);
  --kat-transport: var(--viz-3);
  --kat-subskrypcje: var(--viz-4);
  --kat-inne: var(--viz-5);

  /* ── Typografia, kształt, ruch ──────────────────────────────── */
  --font-serif: "Crimson Text", Georgia, serif;
  --font-sans: dmSans, "DM Sans", system-ui, sans-serif;

  --radius-sm: 0.9rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.5rem;
  --radius-xl: 2.75rem;
  --radius-pill: 999px;

  --ease-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.28, 0.44, 1); /* lekkie przestrzelenie ~4% */
  --reveal-duration: 0.9s;

  --container: 74rem;
  --shadow-card: 0 1px 2px rgb(18 12 8 / 0.05), 0 16px 40px -16px rgb(18 12 8 / 0.18);
  --shadow-nav: 0 1px 2px rgb(18 12 8 / 0.06), 0 10px 28px -14px rgb(18 12 8 / 0.16);

  /* ── Gradienty (całe wartości tła) ──────────────────────────── */
  /* przejście CTA → stopka: biel → krem → błękit; pełny --blue osiągamy
     przed dołem (80%), więc dolny pas jest już jednolity i styka się ze
     stopką bez szwu */
  --grad-cta: linear-gradient(var(--surface) 0%, var(--bg) 26%, var(--blue) 80%);
}