/* ==========================================================================
   Pałac Antyków — tokeny designu
   Jedno źródło prawdy: kolory, typografia, rytm, ruch. Zmiana tutaj = zmiana całej strony.
   Paleta i fonty zgodne z briefem marki (brąz / złoto / krem, Playfair Display + Lato).
   ========================================================================== */
:root {
  color-scheme: light;

  /* --- Kolory marki --- */
  --c-brown-950: #1F1410;
  --c-brown-900: #2C1810;   /* tło ciemne, tekst na kremie */
  --c-brown-800: #3A2419;
  --c-brown-700: #5C3A2E;   /* brąz drugorzędny */
  --c-brown-600: #7A5344;
  --c-gold-400:  #D9BE8C;
  --c-gold-500:  #C9A96E;   /* złoto: linie, etykiety, hover */
  --c-gold-600:  #B08D57;
  --c-gold-700:  #8E6F3F;
  --c-cream-50:  #FBF8F3;
  --c-cream-100: #F5F0EA;   /* „papier” — tło sekcji jasnych */
  --c-cream-200: #EDE5DA;
  --c-beige-300: #D4C5B0;   /* passe-partout, ramki */
  --c-beige-400: #BFAE95;
  --c-white:     #FFFFFF;   /* tło zdjęć produktowych */

  /* --- Role (nadpisywane w .surface-dark) --- */
  --bg: var(--c-cream-100);
  --bg-elev: var(--c-cream-50);
  --bg-sunken: var(--c-cream-200);
  --fg: var(--c-brown-950);
  --fg-muted: #6E5E53;
  --accent: var(--c-gold-600);
  --accent-soft: var(--c-gold-500);
  --line: rgba(44, 24, 16, .14);
  --line-strong: rgba(44, 24, 16, .32);
  --focus: var(--c-gold-600);

  /* --- Typografia --- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3rem, 1.6rem + 5.2vw, 7.5rem);
  --fs-h1: clamp(2.4rem, 1.6rem + 3vw, 4.75rem);
  --fs-h2: clamp(1.85rem, 1.35rem + 1.8vw, 3.15rem);
  --fs-h3: clamp(1.3rem, 1.15rem + .6vw, 1.7rem);
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-small: .875rem;
  --fs-tiny: .75rem;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.65;
  --track-caps: .14em;

  /* --- Rytm --- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --container: 1360px;
  --measure: 64ch;
  --header-h: 5.25rem;
  --frame-inset: 1.5rem;
  --radius: 0;

  /* --- Ruch --- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 220ms;
  --dur: 480ms;
  --dur-slow: 1000ms;

  --z-header: 50;
  --z-toast: 70;
  --bar-h: 0px;                 /* wysokość paska akcji na telefonie (ustawiana poniżej 900 px) */
}

@media (max-width: 899px) {
  :root { --bar-h: calc(3.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 720px) {
  :root {
    --header-h: 4.5rem;
    --frame-inset: 1rem;
    --section: 3.75rem;
    --space-8: 3rem;
    --space-9: 4rem;
  }
}

/* Ciemna powierzchnia: te same komponenty, odwrócone role kolorów. */
.surface-dark {
  --bg: var(--c-brown-900);
  --bg-elev: var(--c-brown-800);
  --bg-sunken: var(--c-brown-950);
  --fg: var(--c-cream-100);
  --fg-muted: var(--c-beige-300);
  --accent: var(--c-gold-500);
  --accent-soft: var(--c-gold-400);
  --line: rgba(201, 169, 110, .26);
  --line-strong: rgba(201, 169, 110, .55);
  --focus: var(--c-gold-400);
  background-color: var(--bg);
  color: var(--fg);
  color-scheme: dark;
}