/* ============================================
   DESIGN TOKENS — Tantra Club Praha
   Extracted from WP theme + custom palette
   ============================================ */

:root {
  /* Background layers */
  --bg:            #0F0F0F;
  --bg-alt:        #0d0d0d;
  --surface:       rgba(16, 7, 12, 0.72);
  --surface-2:     rgba(20, 9, 15, 0.78);
  --surface-3:     rgba(26, 11, 19, 0.84);

  /* Gold palette (from WP: #d1c2b0, #8f7032, #ddca86, #c8b273) */
  --gold:          #d1c2b0;
  --gold-deep:     #8f7032;
  --gold-light:    #ddca86;
  --gold-medium:   #c8b273;
  --gold-muted:    #a37e37;

  /* Text */
  --text:          #cecece;
  --text-muted:    #aaaaaa;
  --text-faint:    #595959;
  --text-on-gold:  #0F0F0F;

  /* Borders */
  --border:        rgba(255,255,255,0.08);
  --border-gold:   rgba(209,194,176,0.25);
  --border-strong: #595959;

  /* Status */
  --available:     #4cc9f0;  /* cyan */
  --unavailable:   #595959;

  /* Brand / Action */
  --whatsapp:      #25D366;
  --whatsapp-dark: #128C7E;
  --telegram:      #4cc9f0;

  /* Book button — dark wine */
  --btn-primary:      #6b1535;
  --btn-primary-dark: #4d0e28;
  --btn-primary-glow: rgba(107,21,53,0.45);

  /* Purple orbs */
  --purple-orb:  rgba(130,25,80,0.55);
  --purple-glow: rgba(95,15,65,0.35);

  /* Typography */
  --font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3.5rem;    /* 56px */

  --leading-tight:  1.2;
  --leading-body:   1.65;

  --weight-light:   300;
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* Spacing scale */
  --sp-1:   0.25rem;  /* 4px  */
  --sp-2:   0.5rem;   /* 8px  */
  --sp-3:   0.75rem;  /* 12px */
  --sp-4:   1rem;     /* 16px */
  --sp-5:   1.25rem;  /* 20px */
  --sp-6:   1.5rem;   /* 24px */
  --sp-8:   2rem;     /* 32px */
  --sp-10:  2.5rem;   /* 40px */
  --sp-12:  3rem;     /* 48px */
  --sp-16:  4rem;     /* 64px */
  --sp-20:  5rem;     /* 80px */
  --sp-24:  6rem;     /* 96px */

  /* Border radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  30px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
  --shadow-gold: 0 0 20px rgba(209,194,176,0.15);
  --shadow-glow: 0 0 40px rgba(143,112,50,0.3);

  /* Layout */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 3rem);

  /* Header */
  --header-h:    64px;
  --header-h-md: 72px;

  /* Transitions */
  --ease-in:   cubic-bezier(0.4, 0, 1, 1);
  --ease-out:  cubic-bezier(0, 0, 0.2, 1);
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --duration:  220ms;
  --duration-lg: 380ms;

  /* Z-index layers */
  --z-base:    1;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  300;
  --z-fab:     400;
  --z-top:     500;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration: 0ms;
    --duration-lg: 0ms;
  }
}

/* ---- Reveal animation ---- */
.will-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}

.revealed {
  opacity: 1;
  transform: translateY(0);
}