/**
 * ZZB Design Tokens
 * Single source of truth for palette, typography, spacing, motion.
 * Palette extracted from Zawsze z Bogiem mobile app.
 */

:root {
  /* ---------- Palette ---------- */
  --zzb-cream:        #f5ede0;
  --zzb-cream-soft:   #faf5ea;
  --zzb-card:         #fdf9f0;
  --zzb-card-hover:   #fff8e8;
  --zzb-paper:        #ffffff;

  --zzb-gold-50:      #f3e7c3;
  --zzb-gold-200:     #e6cf8e;
  --zzb-gold:         #c9a463;
  --zzb-gold-deep:    #a18a4d;
  --zzb-gold-shadow:  rgba(201, 164, 99, 0.18);

  --zzb-ink:          #1a2236;
  --zzb-ink-soft:     #3d4555;
  --zzb-muted:        #6c5d70;  /* darkened from #8a7a8e for WCAG AA contrast on cream bg */
  --zzb-muted-warm:   #a89c8a;

  --zzb-success:      #5b8c5a;
  --zzb-danger:       #a44a3f;
  --zzb-info:         #6a7e9c;
  --zzb-overlay:      rgba(26, 34, 54, 0.55);

  --zzb-gradient-gold:       linear-gradient(180deg, #d4b674 0%, #c9a463 50%, #a18a4d 100%);
  --zzb-gradient-cream-fade: linear-gradient(180deg, #f5ede0 0%, #faf5ea 100%);
  --zzb-gradient-paper:      linear-gradient(135deg, #fdf9f0 0%, #fff8e8 100%);

  /* ---------- Typography ---------- */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-script:  'Sacramento', 'Petit Formal Script', cursive;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.5rem;
  --fs-2xl:   2rem;
  --fs-3xl:   2.75rem;
  --fs-4xl:   4rem;
  --fs-hero:  clamp(3rem, 8vw, 7.5rem);

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.55;
  --lh-loose:  1.8;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:  0.08em;
  --tracking-extra: 0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-48: 12rem;

  /* ---------- Layout ---------- */
  --width-narrow:  720px;
  --width-content: 1080px;
  --width-wide:    1320px;

  --radius-sm:   4px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:   0 1px 2px rgba(26, 34, 54, 0.04);
  --shadow-sm:   0 2px 8px rgba(26, 34, 54, 0.06), 0 1px 2px rgba(201, 164, 99, 0.08);
  --shadow-md:   0 8px 24px rgba(26, 34, 54, 0.08), 0 2px 6px rgba(201, 164, 99, 0.10);
  --shadow-lg:   0 24px 48px rgba(26, 34, 54, 0.10), 0 8px 16px rgba(201, 164, 99, 0.12);
  --shadow-gold: 0 12px 32px rgba(201, 164, 99, 0.28);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-cinema: cubic-bezier(0.83, 0, 0.17, 1);

  --dur-instant: 100ms;
  --dur-fast:    200ms;
  --dur-base:    320ms;
  --dur-slow:    560ms;
  --dur-cinema:  800ms;
  --dur-marquee: 40s;

  /* ---------- Z-index scale ---------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 800;
  --z-modal:   900;
  --z-toast:   1000;

  /* ---------- Mockup compatibility aliases ----------
   * Sacred Editorial product page redesign (PR1) uses shorter token names
   * (--ff-*, --sp-*, --r-*, --d-*). Map them to existing tokens to keep
   * legacy CSS unchanged while letting new product.css port verbatim.
   */
  --ff-display: var(--font-display);
  --ff-body:    var(--font-body);
  --ff-mono:    var(--font-mono);

  --sp-1:  var(--space-1);
  --sp-2:  var(--space-2);
  --sp-3:  var(--space-3);
  --sp-4:  var(--space-4);
  --sp-6:  var(--space-6);
  --sp-8:  var(--space-8);
  --sp-12: var(--space-12);
  --sp-16: var(--space-16);
  --sp-24: var(--space-24);

  --r-sm:   var(--radius-sm);
  --r-md:   var(--radius-md);
  --r-lg:   var(--radius-lg);
  --r-pill: var(--radius-pill);

  --d-instant: var(--dur-instant);
  --d-fast:    var(--dur-fast);
  --d-base:    var(--dur-base);
  --d-slow:    var(--dur-slow);
  --d-cinema:  var(--dur-cinema);

  --container-narrow:  var(--width-narrow);
  --container-content: var(--width-content);
  --container-wide:    var(--width-wide);

  --split-gallery: 60%;
  --split-info:    40%;
}

/* Reduced motion: collapse all animations and transitions */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}