/* =========================================================
   Reliance Hospitality — Colors & Type
   Source of truth for design tokens.
   ========================================================= */

/* ---------- Fonts ----------------------------------------- */
@font-face {
  font-family: "Gotham";
  font-weight: 200;
  font-style: normal;
  src: url("fonts/GothamLight.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 200;
  font-style: italic;
  src: url("fonts/GothamLightItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 400;
  font-style: normal;
  src: url("fonts/GothamBook.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 400;
  font-style: italic;
  src: url("fonts/GothamBookItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  font-style: normal;
  src: url("fonts/GothamMedium.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 500;
  font-style: italic;
  src: url("fonts/GothamMediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 700;
  font-style: normal;
  src: url("fonts/GothamBold.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 700;
  font-style: italic;
  src: url("fonts/GothamBoldItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Gotham";
  font-weight: 900;
  font-style: normal;
  src: url("fonts/Gotham-Black.otf") format("opentype");
}

:root {
  /* ---------- Brand Palette --------------------------------- */
  --rh-navy:        #011E31;   /* Primary — deep midnight navy */
  --rh-navy-700:    #0A2C44;
  --rh-navy-500:    #1F4666;
  --rh-navy-300:    #6B8AA6;

  --rh-gold:        #BF8809;   /* Accent — heritage gold       */
  --rh-gold-600:    #A87605;
  --rh-gold-400:    #D9A93A;
  --rh-gold-200:    #EBCB7A;
  --rh-gold-50:     #FBF3DC;   /* Tier card / soft fill        */

  --rh-white:       #FFFFFF;
  --rh-paper:       #FAF8F5;   /* Warm off-white background    */
  --rh-stone-100:   #F1EEE8;
  --rh-stone-200:   #E4E0D7;
  --rh-stone-300:   #C9C3B6;
  --rh-stone-500:   #8C887F;
  --rh-stone-700:   #4D4A45;

  /* ---------- Semantic Colors ------------------------------ */
  --bg:             var(--rh-white);
  --bg-soft:        var(--rh-paper);
  --bg-inverse:     var(--rh-navy);
  --bg-band:        var(--rh-gold-50);

  --fg:             var(--rh-navy);
  --fg-muted:       var(--rh-stone-700);
  --fg-subtle:      var(--rh-stone-500);
  --fg-inverse:     var(--rh-white);
  --fg-accent:      var(--rh-gold);

  --border:         var(--rh-stone-200);
  --border-strong:  var(--rh-stone-300);
  --border-inverse: rgba(255,255,255,0.18);

  --success:        #2E7D5B;
  --warning:        var(--rh-gold);
  --danger:         #B23A2C;

  /* ---------- Type ----------------------------------------- */
  --font-sans:      "Gotham", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display:   "Gotham", "Montserrat", system-ui, sans-serif;

  --fw-light:       300;  /* @kind font */
  --fw-book:        400;  /* @kind font */
  --fw-medium:      500;  /* @kind font */
  --fw-bold:        700;  /* @kind font */
  --fw-black:       900;  /* @kind font */

  /* Type scale — generous, navy-on-white, executive feel */
  --fs-xs:          12px;
  --fs-sm:          14px;
  --fs-base:        16px;
  --fs-md:          18px;
  --fs-lg:          22px;
  --fs-xl:          28px;
  --fs-2xl:         36px;
  --fs-3xl:         48px;
  --fs-4xl:         64px;
  --fs-5xl:         84px;

  --lh-tight:       1.05;  /* @kind font */
  --lh-snug:        1.2;   /* @kind font */
  --lh-normal:      1.45;  /* @kind font */
  --lh-loose:       1.6;   /* @kind font */

  --tracking-tight:  -0.01em;  /* @kind font */
  --tracking-normal: 0;        /* @kind font */
  --tracking-wide:   0.06em;   /* @kind font */ /* All-caps labels (HOSPITALITY, KICKSTART) */
  --tracking-wider:  0.14em;   /* @kind font */ /* Logo-style super-wide tracking */

  /* ---------- Spacing -------------------------------------- */
  --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:  96px;
  --space-10: 128px;

  /* ---------- Radii ---------------------------------------- */
  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    14px;
  --radius-pill:  999px;

  /* ---------- Shadows -------------------------------------- */
  --shadow-xs:  0 1px 2px rgba(1,30,49,0.06);
  --shadow-sm:  0 2px 6px rgba(1,30,49,0.08);
  --shadow-md:  0 8px 20px rgba(1,30,49,0.10);
  --shadow-lg:  0 16px 40px rgba(1,30,49,0.14);
  --shadow-inset: inset 0 0 0 1px rgba(1,30,49,0.06);

  /* ---------- Motion --------------------------------------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);  /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1); /* @kind other */
  --dur-fast:   140ms;  /* @kind other */
  --dur-base:   220ms;  /* @kind other */
  --dur-slow:   420ms;  /* @kind other */
}

/* =========================================================
   Semantic Element Styles
   ========================================================= */
html, body {
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  color: var(--fg);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.h-display, .rh-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

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

h2, .rh-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h3, .rh-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg);
}

h4, .rh-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--fg);
}

p, .rh-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-book);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.rh-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--fg);
  font-weight: var(--fw-book);
}

.rh-eyebrow,
.rh-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-accent);
}

.rh-caption {
  font-size: var(--fs-sm);
  color: var(--fg-subtle);
  line-height: var(--lh-normal);
}

/* Brand wordmark treatment — letter-spaced caps like the logo */
.rh-wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--rh-navy);
}