/* ==========================================================================
   WestDoor Hotel — Tasarım Tokenleri
   Tek kaynak: renk, tipografi, boşluk, hareket.

   Tipografi ve renkler Fairmont Quasar Istanbul'un ölçülen değerlerinden
   alındı: tek aile (Montserrat), sabit px basamakları, 2px köşeli düğmeler,
   siyah–beyaz gövde üzerine tek bir sıcak vurgu (#867556).
   ========================================================================== */

:root {
  /* --- Renk: nötr omurga --------------------------------------------- */
  --c-black:      #000000;   /* koyu bölümler, ana düğme */
  --c-black-hover:#1C1C1C;
  --c-black-soft: #1C1C1C;   /* footer zemini */
  --c-ink:        #2F2F2F;   /* gövde metni */
  --c-ink-soft:   #3A3A3A;
  --c-nav-ink:    #291F1D;   /* menü bağlantıları */
  --c-graphite:   #4A4A4A;
  --c-slate:      #5A5A5A;

  --c-gray-700:   #5A5A5A;
  --c-gray-600:   #6A6A6A;
  --c-gray-500:   #8A8A8A;
  --c-gray-400:   #BABABA;
  --c-gray-300:   #D9D9D9;
  --c-gray-200:   #E8E8E8;
  --c-gray-100:   #F2F1EF;
  --c-mist:       #F7F7F7;   /* fırsat kartı ve sekme zemini */
  --c-porcelain:  #F5F4F2;   /* açık bölüm bandı */
  --c-gray-band:  #F5F4F2;
  --c-paper:      #FFFFFF;
  --c-white:      #FFFFFF;

  /* --- Renk: vurgu ---------------------------------------------------- */
  /* Fairmont'un üst şerit tonu; logodaki bakırla da uyumlu. */
  --c-gold:       #867556;
  --c-gold-deep:  #6E6046;
  --c-gold-light: #B7A98C;
  --c-gold-tint:  #F3F0EA;

  /* Eski bakır adları, tek renge bağlandı — bileşenler kırılmasın. */
  --c-copper:       var(--c-gold);
  --c-copper-deep:  var(--c-gold-deep);
  --c-copper-light: var(--c-gold-light);
  --c-copper-tint:  var(--c-gold-tint);

  /* --- Anlamsal renkler ------------------------------------------------ */
  --bg-page:      var(--c-white);
  --bg-surface:   var(--c-white);
  --bg-inverse:   var(--c-black);

  --fg-primary:   var(--c-ink);
  --fg-heading:   var(--c-black);
  --fg-secondary: var(--c-gray-600);
  --fg-muted:     var(--c-gray-500);
  --fg-inverse:   var(--c-white);
  --fg-inverse-muted: rgba(255, 255, 255, 0.72);

  --accent:       var(--c-gold);
  --accent-text:  var(--c-gold-deep);

  --line:         var(--c-gray-300);
  --line-soft:    var(--c-gray-200);
  --line-inverse: rgba(255, 255, 255, 0.28);
  --line-inverse-soft: rgba(255, 255, 255, 0.16);

  --focus-ring:   var(--c-ink);
  --focus-ring-inverse: var(--c-white);

  /* --- Tipografi -------------------------------------------------------
     Tek aile, her yerde. Başlık da düğme de menü de aynı fonttan okunur;
     ayrım yalnızca boyut ve ağırlıkla kurulur. */
  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-sans:    var(--font-display);

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-display:   300;       /* büyük başlıklar ince ve keskin */

  /* Basamaklar — Fairmont ölçüsünün her basamağı 2px küçültüldü (site
     geneli daha derli toplu okunsun diye); en küçük basamak okunabilirlik
     için 11px'te durur. Küçük ekranda clamp ile iner. Satır yüksekliği
     oran olduğu için yazıyla birlikte küçülür. */
  --fs-3xs:  0.6875rem;                                    /* 11px */
  --fs-2xs:  0.6875rem;                                    /* 11px */
  --fs-xs:   0.6875rem;                                    /* 11px */
  --fs-sm:   0.75rem;                                      /* 12px */
  --fs-base: 0.875rem;                                     /* 14px */
  --fs-md:   0.875rem;                                     /* 14px */
  --fs-lg:   clamp(1rem, 0.4vw + 0.905rem, 1.125rem);      /* 16 → 18px */
  --fs-xl:   clamp(1.125rem, 0.8vw + 0.935rem, 1.375rem);  /* 18 → 22px */
  --fs-2xl:  clamp(1.5rem, 1.6vw + 1.125rem, 1.875rem);    /* 24 → 30px */
  --fs-3xl:  clamp(1.875rem, 3.2vw + 1.125rem, 2.875rem);  /* 30 → 46px */
  --fs-4xl:  clamp(2.125rem, 4.4vw + 1.175rem, 3.475rem);  /* 34 → 55.6px */

  /* Basamak başına satır yüksekliği */
  --lh-3xs:  1.5;    /* 12 → 18 */
  --lh-sm:   1.571;  /* 14 → 22 */
  --lh-base: 1.5;    /* 16 → 24 */
  --lh-lg:   1.4;    /* 20 → 28 */
  --lh-2xl:  1.25;   /* 32 → 40 */
  --lh-3xl:  1.167;  /* 48 → 56 */
  --lh-4xl:  1.125;  /* 57.6 → 64.8 */

  --lh-tight:   1.125;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-relaxed: 1.6;

  /* Harf aralığı — büyük başlıklar sıkışır, küçük etiketler açılır */
  --ls-display: -0.02em;   /* 48px'te ≈ -0.96px */
  --ls-tight:   -0.02em;
  --ls-normal:  0.01em;    /* 16px'te 0.16px */
  --ls-btn:     0.05em;    /* 16px'te 0.8px — düğme ve menü */
  --ls-wide:    0.05em;
  --ls-wider:   0.08em;
  --ls-widest:  0.16em;

  /* --- Boşluk ---------------------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* --- Yerleşim -------------------------------------------------------- */
  --container-max:  1440px;
  --container-wide: 1680px;
  --container-pad:  clamp(1.25rem, 4vw, 4rem);

  /* Header üç şeritten oluşur: duyuru + marka + menü.
     Rezervasyon çubuğu artık header'ın parçası değil — hero'nun içinde durur
     ve kaydırılınca header'ın altına yapışır (booking-dock.js).

     --header-solid-h : duyuru + marka. Hero bu noktadan başlar; menü şeridi
                        hero'nun ilk 80px'ini yarı saydam olarak örter.
     --header-h       : üç şeridin toplamı. Hero'su olmayan sayfa (404)
                        içeriği bu kadar aşağıdan başlatır. */
  --header-promo-h:   56px;   /* Fairmont: 16px dolgu + 24px satır + 16px */
  --header-utility-h: 56px;   /* eski ad — duyuru şeridi */
  --header-main-h:    80px;
  --header-main-h-sm: 64px;
  --header-nav-h:     80px;   /* Fairmont: 28px dolgu + 22px satır + 28px + 2px */
  --header-booking-h: 136px;  /* Fairmont: 12px + 76px satır + 48px */
  --header-solid-h:   calc(var(--header-promo-h) + var(--header-main-h));
  --header-h:         calc(var(--header-solid-h) + var(--header-nav-h));
  /* Kaydırılmış hâlin gerçek yüksekliği: duyuru kapanır, marka şeridi alçalır,
     rezervasyon çubuğu (80px: 64px satır + 16px dolgu) header'ın altına
     yapışır. Çapa (#id) hedefleri bu kadar aşağıdan başlar. */
  --header-h-sm:      calc(var(--header-main-h-sm) + var(--header-nav-h) + 80px);

  /* --- Yükseklik ------------------------------------------------------- */
  --z-base:      1;
  --z-sticky:    100;
  --z-backdrop:  150;
  --z-header:    200;
  --z-mega:      10;
  --z-overlay:   300;
  --z-drawer:    400;
  --z-modal:     500;

  /* --- Gölge — Fairmont neredeyse gölgesiz; yalnızca header ayrışır ----- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px -6px rgba(0, 0, 0, 0.14);
  --shadow-lg: 0 16px 40px -18px rgba(0, 0, 0, 0.28);
  --shadow-header: 0 1px 0 rgba(0, 0, 0, 0.08);

  /* --- Hareket --------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back:   cubic-bezier(0.34, 1.4, 0.64, 1);

  --dur-fast:   180ms;
  --dur-base:   320ms;
  --dur-slow:   560ms;
  --dur-slower: 900ms;

  /* --- Köşe — Fairmont keskin: kartlar 0, düğmeler 2px ------------------ */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   2px;
  --radius-lg:   0;
  --radius-pill: 999px;   /* yalnızca rozet ve sayaç */
}

/* Koyu bağlam — koyu bölümler, footer, hero üstü header */
.on-dark {
  --fg-primary:   var(--c-white);
  --fg-heading:   var(--c-white);
  --fg-secondary: rgba(255, 255, 255, 0.78);
  --fg-muted:     rgba(255, 255, 255, 0.58);
  --line:         var(--line-inverse);
  --line-soft:    var(--line-inverse-soft);
  --focus-ring:   var(--focus-ring-inverse);
  color: var(--fg-primary);
}

/* Küçük ekranlarda daha derli toplu bir header */
@media (max-width: 639px) {
  :root {
    --header-promo-h:   48px;
    --header-utility-h: 48px;
    --header-main-h:    64px;
    --header-main-h-sm: 56px;
    --header-nav-h:     0px;   /* menü şeridi mobilde yok */
  }
}

@media (max-width: 1279px) {
  :root { --header-nav-h: 0px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   1ms;
    --dur-base:   1ms;
    --dur-slow:   1ms;
    --dur-slower: 1ms;
  }
}