/**
 * Motyw Berotexu dla arc-ds.
 *
 * ŹRÓDŁO PALETY — nie zgadywanka. Kolory pochodzą z arkusza motywu sklepu
 * berotex.net (PrestaShop, motyw „berotex", Bootstrap 4). Sklep stoi za
 * Cloudflare i z części lokalizacji zwraca 403, więc arkusz zdjęty z archiwum:
 *
 *   curl -sSL -o berotex-theme.css \
 *     "http://web.archive.org/web/20250815221906id_/https://berotex.net/themes/berotex/assets/cache/theme-9d113a865.css"
 *
 * Role odczytane z realnego użycia w tym arkuszu:
 *   #1c3059  --primary / .btn-primary   → granat marki
 *   #71cc29  --success / .btn-success   → limonka
 *   #fbba00  stan wybrany (radio)       → żółty
 *   #eb1f1f  --danger
 *   #ff9a52  --warning
 *   #131313  kolor tekstu; #f6f6f6 / #e5e5e5 / #cecece — tła i obramowania
 *
 * CO TO ZASTĄPIŁO: poprzedni `theme.css` był ciemnym CSS-em ze startera arc
 * („task list") — stylował `body`, `form`, `ul`, `li` przykładowej aplikacji
 * i nie miał ŻADNEGO związku z Berotexem ani z tokenami design systemu.
 *
 * JAK TO DZIAŁA: arc-ds nie zna tych kolorów. Komponenty używają wyłącznie klas
 * semantycznych (`bg-primary`, `text-muted-foreground`, `border-border`), a CLI
 * generuje blok `@theme inline`, który mapuje tokeny Tailwinda na zmienne
 * poniżej. Dlatego markę zmienia się TUTAJ, a nie w komponentach.
 *
 * Plik jest wskazany w `package.json` → `arc.theme`, a jego hash wchodzi do
 * cache'u buildu — po zmianie CLI przebuduje bundle sam.
 */

:root {
  /* Bootstrapowy promień sklepu to .25rem; arc-ds operuje większymi kartami,
     na 4px wyglądają jak nieoszlifowane — stąd delikatnie więcej. */
  --radius: 0.375rem;

  --background: hsl(0 0% 100%);
  --foreground: hsl(0 0% 7%);
  --card: hsl(0 0% 100%);
  --card-foreground: hsl(0 0% 7%);
  --popover: hsl(0 0% 100%);
  --popover-foreground: hsl(0 0% 7%);

  /* Granat marki. Ciemny (23% jasności), więc tekst na nim zawsze biały. */
  --primary: hsl(220 52% 23%);
  --primary-foreground: hsl(0 0% 100%);

  --secondary: hsl(220 30% 95%);
  --secondary-foreground: hsl(220 52% 23%);

  --muted: hsl(0 0% 96%);
  --muted-foreground: hsl(208 7% 40%);

  /* Żółty marki jako akcent. Jest jasny (49% przy pełnym nasyceniu), więc
     biały tekst na nim nie ma kontrastu — `foreground` ciemny, dokładnie tak
     jak sklep robi z `.btn-success` (color:#212529). */
  --accent: hsl(44 100% 49%);
  --accent-foreground: hsl(0 0% 7%);

  --destructive: hsl(0 84% 52%);
  --destructive-foreground: hsl(0 0% 100%);

  --border: hsl(0 0% 90%);
  --input: hsl(0 0% 90%);
  --ring: hsl(220 52% 35%);

  /* Wykresy — od najbardziej „firmowego": granat, limonka, żółty, pomarańcz,
     stalowy. */
  --chart-1: hsl(220 52% 23%);
  --chart-2: hsl(93 67% 48%);
  --chart-3: hsl(44 100% 49%);
  --chart-4: hsl(25 100% 66%);
  --chart-5: hsl(208 7% 46%);

  --sidebar: hsl(220 30% 97%);
  --sidebar-foreground: hsl(0 0% 7%);
  --sidebar-primary: hsl(220 52% 23%);
  --sidebar-primary-foreground: hsl(0 0% 100%);
  --sidebar-accent: hsl(44 100% 49%);
  --sidebar-accent-foreground: hsl(0 0% 7%);
  --sidebar-border: hsl(0 0% 90%);
  --sidebar-ring: hsl(220 52% 35%);

  /* ── Tokeny marki — dla stanów, których arc-ds nie nazywa ──────────────
     Panel klienta używa ich na statusy rozliczeń (opłacone / po terminie). */
  --berotex-navy: #1c3059;
  --berotex-lime: #71cc29;
  --berotex-yellow: #fbba00;
  --berotex-danger: #eb1f1f;
  --berotex-warning: #ff9a52;

  /* Font-stack ze sklepu — ta sama rodzina, żeby panel czytało się jak
     przedłużenie berotex.net, a nie osobny produkt. */
  --font-sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
}

/**
 * Tryb ciemny. Sklep go nie ma — to wariant WYPROWADZONY, nie skopiowany.
 *
 * Granat marki schodzi do tła: przy 23% jasności byłby na ciemnym tle
 * nieczytelny jako kolor przycisku. Rolę `--primary` przejmuje jego
 * rozjaśniona wersja. Żółty zostaje prawie bez zmian — świeci równie dobrze
 * na ciemnym.
 */
.dark {
  --background: hsl(220 30% 8%);
  --foreground: hsl(0 0% 96%);
  --card: hsl(220 28% 12%);
  --card-foreground: hsl(0 0% 96%);
  --popover: hsl(220 28% 12%);
  --popover-foreground: hsl(0 0% 96%);

  --primary: hsl(220 52% 62%);
  --primary-foreground: hsl(220 52% 12%);

  --secondary: hsl(220 25% 18%);
  --secondary-foreground: hsl(0 0% 96%);

  --muted: hsl(220 20% 16%);
  --muted-foreground: hsl(215 15% 68%);

  --accent: hsl(44 100% 52%);
  --accent-foreground: hsl(0 0% 7%);

  --destructive: hsl(0 74% 58%);
  --destructive-foreground: hsl(0 0% 100%);

  --border: hsl(220 20% 22%);
  --input: hsl(220 20% 22%);
  --ring: hsl(220 52% 62%);

  --chart-1: hsl(220 52% 62%);
  --chart-2: hsl(93 60% 55%);
  --chart-3: hsl(44 100% 52%);
  --chart-4: hsl(25 90% 66%);
  --chart-5: hsl(208 12% 62%);

  --sidebar: hsl(220 28% 11%);
  --sidebar-foreground: hsl(0 0% 96%);
  --sidebar-primary: hsl(220 52% 62%);
  --sidebar-primary-foreground: hsl(220 52% 12%);
  --sidebar-accent: hsl(44 100% 52%);
  --sidebar-accent-foreground: hsl(0 0% 7%);
  --sidebar-border: hsl(220 20% 22%);
  --sidebar-ring: hsl(220 52% 62%);

  --berotex-lime: #8ade47;
  --berotex-yellow: #fbba00;
  --berotex-danger: #ff5252;
  --berotex-warning: #ffab6b;
}