/* ==========================================================================
   base.css — zmienne motywu, reset, typografia
   Kolory marki (--brand, --accent, --bg) ustawia js/core/theme.js na podstawie
   configu restauracji. Wszystkie pozostałe odcienie wyliczają się tutaj,
   więc każda restauracja wygląda spójnie bez ręcznego dobierania palety.
   ========================================================================== */

:root {
  /* --- Kolory z configu (wartości domyślne na wypadek braku) --- */
  --brand: #c8102e;
  --brand-contrast: #ffffff;   /* tekst na tle --brand (biały lub ciemny, liczony w JS) */
  --accent: #f2a900;
  --accent-contrast: #1f1a17;
  --bg: #fff8f1;

  /* --- Odcienie pochodne --- */
  --brand-soft: color-mix(in srgb, var(--brand) 10%, white);
  --brand-softer: color-mix(in srgb, var(--brand) 5%, white);
  --brand-strong: color-mix(in srgb, var(--brand) 82%, black);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, white);
  --art-bg: color-mix(in srgb, var(--accent) 13%, var(--bg));

  /* --- Neutralne --- */
  --surface: #ffffff;
  --text: #1f1a17;
  --text-muted: #6f6660;
  --text-faint: #a39a93;
  --line: rgba(31, 26, 23, 0.08);
  --success: #1f9d55;
  --danger: #d6361f;

  /* --- Kształt i głębia --- */
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --shadow-sm: 0 1px 2px rgba(31, 26, 23, 0.06), 0 1px 1px rgba(31, 26, 23, 0.04);
  --shadow: 0 6px 20px rgba(31, 26, 23, 0.08), 0 2px 6px rgba(31, 26, 23, 0.05);
  --shadow-lg: 0 18px 50px rgba(31, 26, 23, 0.18);

  /* --- Ruch: jedna „sprężysta” krzywa w całej aplikacji --- */
  --ease-out: cubic-bezier(0.2, 0.9, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  /* --- Układ --- */
  --gutter: 16px;
  --tabbar-h: 58px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --content-max: 560px;

  /* Czcionka systemowa: SF Pro na iPhonie, Roboto na Androidzie */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation; /* bez opóźnienia i zoomu przy podwójnym stuknięciu */
}

a { color: inherit; text-decoration: none; }

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

[hidden] { display: none !important; }

/* --- Typografia --- */
h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
h1 { font-size: 30px; font-weight: 800; }
h2 { font-size: 21px; font-weight: 750; }
h3 { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }

.muted { color: var(--text-muted); }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Szanujemy ustawienie „Ogranicz ruch” w iOS */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}