/* ============================================================
   ADRIO — design tokens v2.1 (paleta z sierpnia 2026)
   Źródło: design system Adrio → tokens/tokens.css. Kopiowane 1:1 (od 05.08.2026
   system ma komplet, łącznie z `--cover-ratio-tile`).
   Tryb kolorystyczny: TYLKO JASNY (decyzja MVP).
   Role semantyczne są gotowe pod wariant ciemny — patrz stub na dole.
   Breakpointy (do użycia w media queries, custom properties tam nie działają):
     --bp-sm: 480px   --bp-md: 768px   --bp-lg: 1024px   --bp-xl: 1280px
   ============================================================ */
:root {
  /* ---------- paleta surowa (nie używać bezpośrednio w komponentach) ---------- */
  /* Paleta v2 (sierpień 2026): granat / bursztyn / czerń / szarość / biel */
  --raw-navy-900: #0B1226;
  --raw-navy-800: #101A31;
  --raw-navy-700: #14213D;   /* granat — kolor marki */
  --raw-navy-600: #1E2F55;
  --raw-navy-100: #DCE1EB;
  --raw-amber-500: #FCA311;  /* bursztyn — akcent */
  --raw-amber-700: #B26A00;  /* bursztyn na jasnym tle (AA) */
  --raw-amber-100: #FDECCB;
  --raw-grey-50:  #FAFAFA;
  --raw-grey-100: #F2F2F2;
  --raw-grey-200: #E5E5E5;
  --raw-grey-300: #D6D6D6;
  --raw-grey-400: #BFBFBF;
  --raw-ink-900:  #000000;
  --raw-ink-600:  #4D4D4D;
  --raw-ink-400:  #8A8A8A;
  --raw-red-700:  #B3261E;
  --raw-red-100:  #FADEDC;
  --raw-green-700: #1F6F4A;  /* tylko status „sukces” */
  --raw-green-100: #DDEDE3;
  --raw-white:    #FFFFFF;

  /* ---------- role semantyczne: powierzchnie i tekst ---------- */
  --color-bg:             var(--raw-grey-50);
  --color-surface:        var(--raw-white);
  --color-surface-alt:    var(--raw-grey-100);
  --color-surface-invert: var(--raw-navy-700);
  --color-border:         var(--raw-grey-200);
  --color-border-strong:  var(--raw-grey-300);
  --color-text:           var(--raw-ink-900);
  --color-text-muted:     var(--raw-ink-600);
  --color-text-subtle:    var(--raw-ink-400);
  --color-text-invert:    var(--raw-white);

  /* ---------- role semantyczne: marka i akcje ---------- */
  --color-brand:          var(--raw-navy-700);
  --color-brand-hover:    var(--raw-navy-600);
  --color-brand-active:   var(--raw-navy-900);
  --color-on-brand:       var(--raw-white);
  --color-accent:         var(--raw-amber-500);
  --color-accent-hover:   #E8940A;
  --color-on-accent:      var(--raw-ink-900);
  --color-accent-text:    var(--raw-amber-700); /* bursztyn na jasnym tle (AA) */
  --color-link:           var(--raw-navy-700);
  --color-link-hover:     var(--raw-amber-700);

  /* ---------- role semantyczne: handel ---------- */
  --color-price:          var(--raw-navy-700);
  --color-price-old:      var(--raw-ink-400);
  --color-omnibus:        var(--raw-ink-600);  /* „najniższa cena z 30 dni" */
  --color-promo:          var(--raw-amber-700);
  --color-promo-bg:       var(--raw-amber-100);
  --color-new:            var(--raw-navy-700);
  --color-new-bg:         var(--raw-navy-100);

  /* ---------- role semantyczne: statusy ---------- */
  --color-danger:         var(--raw-red-700);
  --color-danger-bg:      var(--raw-red-100);
  --color-success:        var(--raw-green-700);
  --color-success-bg:     var(--raw-green-100);
  --color-focus:          var(--raw-amber-700);
  --color-disabled-bg:    var(--raw-grey-200);
  --color-disabled-text:  var(--raw-ink-400);

  /* ---------- typografia ---------- */
  --font-serif: 'Literata', Georgia, 'Times New Roman', serif;
  --font-sans:  'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs:   0.8125rem;  /* 13px — metadane, plakietki */
  --text-sm:   0.875rem;   /* 14px — UI drobny, omnibus */
  --text-base: 1rem;       /* 16px — body */
  --text-md:   1.125rem;   /* 18px — lead */
  --text-lg:   1.3125rem;  /* 21px — H3 */
  --text-xl:   1.625rem;   /* 26px — H2 */
  --text-2xl:  2rem;       /* 32px — H1 podstron */
  --text-3xl:  2.625rem;   /* 42px — hero */

  --leading-tight: 1.2;
  --leading-snug:  1.35;
  --leading-base:  1.55;

  /* ---------- spacing (baza 4px) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;

  /* ---------- promienie ---------- */
  --radius-sm:   4px;   /* okładki, drobne */
  --radius-md:   8px;   /* karty, inputy */
  --radius-lg:   12px;  /* panele, sekcje */
  --radius-pill: 999px; /* przyciski, wyszukiwarka */

  /* ---------- cienie ---------- */
  --shadow-sm: 0 1px 3px rgba(43, 38, 32, 0.08);
  --shadow-md: 0 4px 14px rgba(43, 38, 32, 0.10);
  --shadow-lg: 0 14px 34px rgba(43, 38, 32, 0.18);

  /* ---------- fokus (dostępność — nie usuwać) ---------- */
  --focus-ring: 2px solid var(--color-focus);
  --focus-offset: 2px;

  /* ---------- layout ---------- */
  --container-max: 1200px;
  --cover-ratio-ebook: 2 / 3;  /* okładka e-booka */
  --cover-ratio-audio: 1 / 1;  /* okładka audiobooka */

  /* Kadr okładki w SIATCE katalogu — JEDEN dla wszystkich form. Patrz komentarz
     przy .cover--tile w adrio.css: mieszanie 2:3 i 1:1 w jednej siatce rozjeżdża
     rzędy, a przy `object-fit: cover` kwadratowy kadr obcina okładce tytuł. */
  --cover-ratio-tile: 2 / 3;
}

/* ============================================================
   STUB trybu ciemnego — celowo pusty w MVP.
   Gdy zapadnie decyzja o dark mode: nadpisać WYŁĄCZNIE role
   semantyczne (--color-*), nie dotykać palety surowej ani komponentów.
   ============================================================ */