/* =========================================================
   Hotel Globus — Core Design Tokens
   Ultra-premium alpine-luxury for a boutique 4★ hotel in
   Nalchik, Kabardino-Balkaria. Inspired by Le Mirabeau (Zermatt).
   ========================================================= */

/* ---------- Fonts ----------
   Playfair Display — self-hosted from /fonts (brand-provided files)
   Cinzel           — self-hosted from /fonts (brand-provided file)
   Inter            — Google Fonts CDN (SUBSTITUTION for Satoshi / Neue Haas Grotesk;
                      see README "Type substitutions") */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap");

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/PlayfairDisplay.ttf") format("truetype");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/PlayfairDisplay-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Cinzel";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/Cinzel.ttf") format("truetype");
}

:root {
  /* ---------- Color: Primary (deep alpine blue, the brand voice) ---------- */
  --primary-950: #0A253D;   /* deepest — footer, overlays, dark hero scrim */
  --primary-700: #1A3A5E;   /* secondary dark — pressed states, dark surfaces */
  --primary-500: #2779A7;   /* MAIN ACCENT — links, primary buttons, highlights */
  --primary-300: #5BA3C9;   /* hover, lighter accents, soft glass tint */

  /* ---------- Color: Neutrals (warm, snow-and-stone) ---------- */
  --neutral-0:   #FFFFFF;   /* base canvas */
  --neutral-50:  #F8F7F4;   /* warm off-white surfaces, page background */
  --neutral-100: #F0EDE7;   /* dividers, soft cards, hairline borders */
  --neutral-900: #1C1C1C;   /* primary text on light surfaces */

  /* ---------- Color: Premium accents ---------- */
  --gold-warm:   #C19A6B;   /* gold — premium ribbons, savings badges, icons */
  --success:     #2A9D8F;   /* booking confirmation, available status */

  /* ---------- Color: Aliases — semantic ---------- */
  --bg:                var(--neutral-50);
  --bg-elevated:       var(--neutral-0);
  --bg-inverse:        var(--primary-950);
  --bg-tint:           var(--neutral-100);

  --fg:                var(--neutral-900);
  --fg-muted:          #5A5A5A;        /* derived neutral — body secondary */
  --fg-subtle:         #8A8A8A;        /* derived neutral — captions, meta */
  --fg-on-dark:        var(--neutral-50);
  --fg-on-dark-muted:  #C9D2DC;        /* derived — soft on deep navy */
  --fg-inverse:        var(--neutral-0);

  --accent:            var(--primary-500);
  --accent-hover:      #1F6790;        /* primary-500 darkened */
  --accent-soft:       var(--primary-300);
  --gold:              var(--gold-warm);
  --gold-hover:        #A8825A;

  --border:            var(--neutral-100);
  --border-strong:     #E0DCD2;        /* derived — slightly darker hairline */
  --border-dark:       #2D4866;        /* on dark surfaces */

  /* ---------- Typography: Stacks ---------- */
  --font-display: "Playfair Display", "Cormorant Garamond", "Georgia", serif;
  --font-caps:    "Cinzel", "Trajan Pro", "Playfair Display", serif;
  --font-body:    "Inter", "Neue Haas Grotesk", "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ---------- Typography: Type scale ---------- */
  --fs-hero:    74px;   /* H1 hero — 68–78px range, sits at 74 */
  --fs-h1:      56px;   /* large page title */
  --fs-h2:      46px;   /* section title */
  --fs-h3:      32px;   /* subsection */
  --fs-h4:      24px;   /* card title */
  --fs-h5:      20px;   /* small heading */
  --fs-lead:    22px;   /* opening paragraphs */
  --fs-body:    18px;   /* base body */
  --fs-sm:      15px;   /* secondary */
  --fs-xs:      13px;   /* meta, captions */
  --fs-eyebrow: 12px;   /* tracked caps label */

  /* ---------- Typography: Line heights ---------- */
  --lh-hero:    1.05;
  --lh-tight:   1.15;
  --lh-heading: 1.2;
  --lh-snug:    1.4;
  --lh-body:    1.65;
  --lh-loose:   1.8;

  /* ---------- Typography: Letter spacing ---------- */
  --tracking-hero:    -0.015em;
  --tracking-heading: -0.01em;
  --tracking-body:    0;
  --tracking-eyebrow: 0.18em;
  --tracking-caps:    0.08em;

  /* ---------- Typography: Weights ---------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Spacing — 8pt grid ---------- */
  --space-0:   0px;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  96px;
  --space-11:  120px;     /* section gap min */
  --space-12:  160px;     /* section gap max — luxury airiness */

  /* ---------- Radii — thin, restrained ---------- */
  --radius-xs:  2px;
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;     /* room cards, primary surfaces */
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ---------- Shadows — soft, deep navy-tinted ---------- */
  --shadow-xs:  0 1px 2px rgba(10, 37, 61, 0.04);
  --shadow-sm:  0 2px 6px rgba(10, 37, 61, 0.05), 0 1px 2px rgba(10, 37, 61, 0.04);
  --shadow-md:  0 8px 24px rgba(10, 37, 61, 0.07), 0 2px 6px rgba(10, 37, 61, 0.04);
  --shadow-lg:  0 18px 48px rgba(10, 37, 61, 0.10), 0 4px 12px rgba(10, 37, 61, 0.05);
  --shadow-xl:  0 32px 80px rgba(10, 37, 61, 0.14), 0 8px 24px rgba(10, 37, 61, 0.06);
  --shadow-gold: 0 12px 32px rgba(193, 154, 107, 0.20);

  /* ---------- Motion ---------- */
  --ease-standard:  cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-emphasised: cubic-bezier(0.16, 0.84, 0.44, 1);
  --ease-in-out:    cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   420ms;
  --dur-luxe:   720ms;   /* used for image reveals, hero parallax */

  /* ---------- Layout ---------- */
  --container-narrow: 960px;
  --container:        1200px;
  --container-wide:   1440px;
  --gutter:           32px;
  --header-h:         92px;
}

/* =========================================================
   Semantic element styles — apply via class on demand
   ========================================================= */

.hg-hero,
h1.hg-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--tracking-hero);
  color: var(--fg);
}

.hg-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
}

.hg-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
}

.hg-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg);
}

.hg-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg);
}

.hg-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
}

.hg-caps {
  font-family: var(--font-caps);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

.hg-lead {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  font-weight: var(--fw-regular);
}

.hg-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  font-weight: var(--fw-regular);
}

.hg-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--fg-muted);
}

.hg-meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--fg-subtle);
  letter-spacing: 0.02em;
}