/* AliPaczka redesign 2026 - design tokens (light/dark) + base reset.
   Light = :root. Dark = html[data-theme="dark"] (lub auto wg systemu zanim JS ustawi). */

:root {
  --bg: #F4F2EE;
  --surface: #FFFFFF;
  --surface-2: #FAF8F4;
  --hero: #FFF6F0;
  --fg: #1B1A18;
  --muted: #6E6A63;
  --line: #ECE7DF;
  --field-line: #E2DCD2;
  --accent: #F04E23;
  --accent-2: #F7941E;
  --accent-soft: #FDEDE6;
  /* Tło pod tekstem na akcencie (przyciski primary, badge, CTA) + kolor tego tekstu.
     --accent (#F04E23) zostaje jako kolor marki, ale biały tekst na nim ma tylko 3.61:1.
     #D9390F = ten sam odcień przyciemniony (HSL) do 4.62:1 z białym (WCAG AA >= 4.5). */
  --accent-strong: #D9390F;
  --on-accent: #FFFFFF;
  /* Tekst w kolorze akcentu na jasnych tłach (aktywne menu, linki, wartości): #C2330D ma 4.89-5.57:1
     na --bg, --surface, --surface-2 i --accent-soft (WCAG AA). Ikony i logo zostają na --accent. */
  --accent-text: #C2330D;
  --ok: #1F8A5B;
  --ok-soft: #E7F4EE;
  --warn: #C77A0A;
  --warn-soft: #FBF1DE;
  --info: #2D6FE0;
  --info-soft: rgba(45,111,224,.12);
  --shadow: rgba(60,30,10,.4);
  --skeleton: linear-gradient(90deg,#f0ece6 25%,#f8f5f1 37%,#f0ece6 63%);

  --font-display: 'Plus Jakarta Sans', 'Manrope', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body: 'Figtree', 'Onest', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 22px;
  --maxw: 1180px;
}

html[data-theme="dark"] {
  --bg: #131210;
  --surface: #1C1A18;
  --surface-2: #242120;
  --hero: #1A1715;
  --fg: #F3EFEA;
  --muted: #A39E96;
  --line: #312C28;
  --field-line: #3a342f;
  --accent: #FF6A3D;
  --accent-2: #FBA53A;
  --accent-soft: #3A241B;
  /* ciemny tekst na jasnym akcencie: #131210 na #FF6A3D = 6.58:1 (biały miał 2.85:1) */
  --accent-strong: #FF6A3D;
  --on-accent: #131210;
  --accent-text: #FF6A3D;
  --ok: #36B37E;
  --ok-soft: #16271F;
  --warn: #F4B740;
  --warn-soft: #2B2415;
  --info: #5B9BFF;
  --info-soft: rgba(91,155,255,.14);
  --shadow: rgba(0,0,0,.7);
  --skeleton: linear-gradient(90deg,#242120 25%,#2e2926 37%,#242120 63%);
}

/* Auto dark zanim JS ustawi data-theme (brak migotania dla użytkowników systemowo na dark). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131210;
    --surface: #1C1A18;
    --surface-2: #242120;
    --hero: #1A1715;
    --fg: #F3EFEA;
    --muted: #A39E96;
    --line: #312C28;
    --field-line: #3a342f;
    --accent: #FF6A3D;
    --accent-2: #FBA53A;
    --accent-soft: #3A241B;
    --accent-strong: #FF6A3D;
    --on-accent: #131210;
    --accent-text: #FF6A3D;
    --ok: #36B37E;
    --ok-soft: #16271F;
    --warn: #F4B740;
    --warn-soft: #2B2415;
    --info: #5B9BFF;
    --info-soft: rgba(91,155,255,.14);
    --shadow: rgba(0,0,0,.7);
    --skeleton: linear-gradient(90deg,#242120 25%,#2e2926 37%,#242120 63%);
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; }

a { color: inherit; }

img { max-width: 100%; }

button { font-family: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(120,120,120,.32); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes apShimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } }
@keyframes apFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes apSheet { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes apToast { from { opacity: 0; transform: translate(-50%,12px); } to { opacity: 1; transform: translate(-50%,0); } }
@keyframes apSpin { to { transform: rotate(360deg); } }
@keyframes apDot { 0%,80%,100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}