/* ==========================================================================
   ТРОИЦКАЯ — Colors & Type Foundations
   Hotel Troitskaya · Nizhny Novgorod
   ========================================================================== */

/* ---------- Webfonts ----------------------------------------------------- */
@font-face {
  font-family: "Bootleggers";
  src: url("fonts/Bootleggers-Simple.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Thin.ttf") format("truetype");
  font-weight: 200; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Light.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Italic.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Medium.ttf") format("truetype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cera Pro";
  src: url("fonts/CeraPro-Black.ttf") format("truetype");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Colors ------------------------------------------------------ */
:root {
  /* Primary palette — pulled from the official brand sheet */
  --espresso:    #261F18;   /* deep warm near-black — primary surface */
  --espresso-2:  #1B1612;   /* darker still — for layered depth */
  --espresso-3:  #3A3025;   /* softer brown — used as section break */

  --champagne:   #DCCFAF;   /* warm cream — primary type on dark, BG on light */
  --champagne-2: #E8DDC0;   /* lighter — hover / hi-light tone */
  --champagne-3: #C8B98F;   /* deeper — borders, dividers, deco rules */

  --gold:        #B7975A;   /* burnished gold accent — sparingly */
  --gold-soft:   #927448;

  --burgundy:    #6E2A2A;   /* optional warm accent — booking CTA, errors */
  --forest:      #3F5742;   /* optional secondary accent — success, vintage */

  /* Semantic — dark mode (default) */
  --bg:          var(--espresso);
  --bg-soft:     var(--espresso-2);
  --bg-raised:   var(--espresso-3);
  --fg:          var(--champagne);
  --fg-muted:    color-mix(in oklab, var(--champagne) 70%, var(--espresso) 30%);
  --fg-faint:    color-mix(in oklab, var(--champagne) 45%, var(--espresso) 55%);
  --rule:        color-mix(in oklab, var(--champagne) 25%, transparent);
  --rule-strong: var(--champagne-3);
  --accent:      var(--gold);

  /* Light surfaces (cream cards, room cards, etc) */
  --paper:       var(--champagne);
  --paper-2:     var(--champagne-2);
  --ink:         var(--espresso);
  --ink-muted:   color-mix(in oklab, var(--espresso) 70%, var(--champagne) 30%);
  --ink-faint:   color-mix(in oklab, var(--espresso) 45%, var(--champagne) 55%);

  /* Spacing scale (4-based) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 144px;

  /* Radii — squared, with one soft option */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* Borders */
  --border-hair:   1px solid var(--rule);
  --border-strong: 1px solid var(--rule-strong);
  --border-deco:   2px solid var(--champagne-3);

  /* Shadows — restrained, warm */
  --shadow-1: 0 1px 0 rgba(0,0,0,0.15);
  --shadow-2: 0 12px 32px -16px rgba(0,0,0,0.45);
  --shadow-3: 0 30px 60px -24px rgba(0,0,0,0.55);

  /* Type families */
  --font-display: "Bootleggers", "Limelight", "Cera Pro", serif;
  --font-body:    "Cera Pro", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Type scale — display-led, intentionally vintage */
  --tracking-deco:   0.42em;   /* "ГОСТИНИЦА" sub-tag spacing */
  --tracking-wide:   0.16em;   /* main display tracking */
  --tracking-tight: -0.01em;   /* small caps, body emphasis */

  /* Easing — old-world, no bounce */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur-1: 140ms;
  --dur-2: 280ms;
  --dur-3: 520ms;
}

/* ---------- Base ------------------------------------------------------- */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--gold); color: var(--espresso); }

/* ---------- Semantic type roles ---------------------------------------- */
.t-display,
h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(56px, 9vw, 168px);
  line-height: 0.95;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.t-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 84px);
  line-height: 1.0;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.t-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.t-h3, h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: 0;
}
.t-eyebrow,
.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-deco);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.t-lead, .lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: 0;
}
p, .t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
}
.t-small, small {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-muted);
}
.t-caps {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--tracking-deco);
  text-transform: uppercase;
}
.t-numeric {
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}

/* Cyrillic-friendly small caps display */
.t-display-cyr {
  font-family: var(--font-display);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}

a { color: inherit; text-decoration: none; }
hr { border: 0; height: 1px; background: var(--rule); }

/* ---------- Light surface helper -------------------------------------- */
.on-paper {
  background: var(--paper);
  color: var(--ink);
  --fg: var(--ink);
  --fg-muted: var(--ink-muted);
  --fg-faint: var(--ink-faint);
  --rule: color-mix(in oklab, var(--ink) 18%, transparent);
  --rule-strong: var(--champagne-3);
}