/* =============================================================
   VARIABLES.CSS — Design Tokens
   Masážny Rezervačný Salón
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Jost:wght@300;400;500&family=Cinzel:wght@400;600&display=swap');

:root {

  /* ─── Farebná Paleta ─────────────────────────────────────── */

  /* Primárne hnedé */
  --color-brown-dark:    #2C1A0E;
  --color-brown-mid:     #5C3A1E;
  --color-brown-light:   #8B5E3C;

  /* Zlatá */
  --color-gold-deep:     #A07830;
  --color-gold:          #C9963C;
  --color-gold-light:    #E8C87A;
  --color-gold-pale:     #F5E6C4;

  /* Zelená (spirituálna) */
  --color-green-dark:    #2A3B2A;
  --color-green-mid:     #4A6741;
  --color-green-light:   #8FAF7E;

  /* Béžová / Neutrálna */
  --color-beige-dark:    #C4A882;
  --color-beige:         #E8D5B7;
  --color-beige-light:   #F7F0E6;
  --color-cream:         #FDFAF5;

  /* Text */
  --text-primary:        #F5E6C4;
  --text-secondary:      #C4A882;
  --text-dark:           #2C1A0E;

  /* Overlays & Efekty */
  --overlay-dark:        rgba(44, 26, 14, 0.75);
  --overlay-gold:        rgba(201, 150, 60, 0.12);
  --shadow-luxury:       0 8px 40px rgba(44, 26, 14, 0.35);
  --shadow-gold:         0 4px 20px rgba(201, 150, 60, 0.25);

  /* ─── Typografia ─────────────────────────────────────────── */

  --font-heading:   'Cormorant Garamond', serif;
  --font-display:   'Cinzel', serif;
  --font-body:      'Jost', sans-serif;

  --size-hero:      clamp(3rem, 7vw, 6rem);
  --size-h1:        clamp(2.2rem, 4vw, 3.5rem);
  --size-h2:        clamp(1.6rem, 3vw, 2.5rem);
  --size-h3:        clamp(1.2rem, 2vw, 1.6rem);
  --size-body:      1rem;
  --size-small:     0.875rem;

  --line-heading:   1.15;
  --line-body:      1.7;
  --letter-wide:    0.12em;

  /* ─── Spacing ────────────────────────────────────────────── */

  --space-xs:    0.5rem;
  --space-sm:    1rem;
  --space-md:    2rem;
  --space-lg:    4rem;
  --space-xl:    7rem;
  --space-2xl:   10rem;

  /* ─── Borders & Radius ───────────────────────────────────── */

  --border-gold:         1px solid var(--color-gold);
  --border-gold-subtle:  1px solid rgba(201, 150, 60, 0.3);
  --radius-sm:           4px;
  --radius-md:           8px;
  --radius-lg:           16px;

  /* ─── Transitions ────────────────────────────────────────── */

  --transition-fast:   0.2s ease;
  --transition-base:   0.4s ease;
  --transition-slow:   0.8s ease;
  --transition-luxury: 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ─── Z-Index ────────────────────────────────────────────── */

  --z-base:    1;
  --z-above:   10;
  --z-navbar:  100;
  --z-overlay: 200;
  --z-modal:   300;

  /* ─── Layout ─────────────────────────────────────────────── */

  --max-width:       1200px;
  --max-width-text:  760px;
  --navbar-height:   80px;
}