/* ============================================================
   LOOOK DEKOR — Design Tokens
   Editorial × premium-hotel visual language.
   Constrained to Bitrix/Aspro Corp 3.0 template capabilities.
   ============================================================ */

/* ---- Fonts (Google Fonts substitutes — see README for finals) ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Color palette (HEX, locked) ---------- */
  --cream:        #F4EFE6;   /* base background, warm cream */
  --taupe:        #E8DFD0;   /* section blocks, cards on cream */
  --taupe-soft:   #EDE5D7;   /* hairline-lighter taupe, dividers */
  --graphite:     #1F1B16;   /* primary text, warm near-black */
  --graphite-mid: #4A4239;   /* secondary text on cream */
  --graphite-mut: #8A7F70;   /* muted captions, line numbers */
  --chocolate:    #3C342C;   /* dark inversion sections */
  --chocolate-2:  #2A241E;   /* dark section deeper variant */
  --bronze:       #8A6E4B;   /* primary CTA — golden-brown */
  --bronze-hover: #7E6443;   /* CTA hover (-8%) */
  --bronze-light: #C9A878;   /* accent for type on chocolate (bronze fails contrast there) */
  --hairline:     #C7BBA6;   /* 1px borders on cream */
  --hairline-dk:  #5A5046;   /* 1px borders on chocolate */

  /* ---------- Semantic ---------- */
  --bg:            var(--cream);
  --bg-alt:        var(--taupe);
  --bg-invert:     var(--chocolate);
  --fg:            var(--graphite);
  --fg-2:          var(--graphite-mid);
  --fg-mut:        var(--graphite-mut);
  --fg-on-invert:  var(--cream);
  --border:        var(--hairline);
  --cta:           var(--bronze);
  --cta-fg:        var(--cream);

  /* ---------- Typography families ---------- */
  --font-display:  'Cormorant Garamond', 'Canela', 'Playfair Display', Georgia, serif;
  --font-sans:     'Manrope', 'Söhne', 'Inter', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale (desktop, 1440px render) ---------- */
  --fs-hero:       clamp(72px, 9vw, 132px);   /* display wordmark over photo */
  --fs-h1:         clamp(56px, 6.5vw, 96px);  /* serif page titles */
  --fs-h2:         clamp(36px, 3.4vw, 52px);  /* serif section titles */
  --fs-h3:         28px;                       /* serif subsections */
  --fs-h4:         20px;                       /* sans, eyebrows */
  --fs-body-lg:    18px;
  --fs-body:       16px;
  --fs-small:      14px;
  --fs-eyebrow:    12px;                       /* sans uppercase, tracked */

  /* ---------- Tracking / leading ---------- */
  --lh-display:    1.02;
  --lh-heading:    1.12;
  --lh-body:       1.65;
  --tr-eyebrow:    0.22em;
  --tr-button:     0.14em;
  --tr-nav:        0.08em;

  /* ---------- Geometry (rectangular, near-zero radii) ---------- */
  --r-0: 0px;
  --r-1: 2px;        /* buttons, inputs */
  --r-2: 4px;        /* upper limit */

  /* ---------- Spacing scale (8px base) ---------- */
  --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:   80px;       /* min vertical between sections */
  --s-10: 120px;       /* big sections */
  --s-11: 160px;

  /* ---------- Grid ---------- */
  --content-w:     1280px;
  --content-w-wide:1360px;
  --gutter:        24px;
  --col-gap:       32px;

  /* ---------- Effects (tight & minimal) ---------- */
  --shadow-none:   none;
  --shadow-soft:   0 1px 0 rgba(31,27,22,0.06);
  --hover-overlay: rgba(31,27,22,0.18);   /* darken photo on card hover */
  --transition:    180ms cubic-bezier(.4,.0,.2,1);
}

/* ============================================================
   Base resets
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ============================================================
   Semantic element styles
   ============================================================ */

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-5);
  color: var(--fg);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: -0.005em;
  margin: 0 0 var(--s-5);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.2;
  margin: 0 0 var(--s-4);
}

h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.3;
  margin: 0 0 var(--s-3);
}

p {
  margin: 0 0 var(--s-4);
  max-width: 62ch;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
a:hover { border-bottom-color: currentColor; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-mut);
}

.numeral {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(64px, 8vw, 120px);
  line-height: 1;
  color: var(--fg);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ============================================================
   Layout helpers
   ============================================================ */

.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-10) 0;
  background: var(--bg);
  color: var(--fg);
}
.section--alt    { background: var(--bg-alt); }
.section--invert { background: var(--bg-invert); color: var(--fg-on-invert); }
.section--invert .eyebrow,
.section--invert .numeral { color: var(--fg-on-invert); }

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--col-gap);
}

/* Editorial asymmetric splits */
.split-60-40 { display: grid; grid-template-columns: 60fr 40fr; gap: var(--s-8); }
.split-70-30 { display: grid; grid-template-columns: 70fr 30fr; gap: var(--s-8); }
.split-40-60 { display: grid; grid-template-columns: 40fr 60fr; gap: var(--s-8); }

/* ============================================================
   Buttons (rectangular, 2px radius, no icons)
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-1);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  line-height: 1;
}

.btn--primary {
  background: var(--cta);
  color: var(--cta-fg);
}
.btn--primary:hover { background: var(--bronze-hover); }

.btn--secondary {
  background: transparent;
  color: var(--fg);
  border-color: var(--fg);
}
.btn--secondary:hover { background: var(--fg); color: var(--cream); }

.section--invert .btn--primary { background: var(--cream); color: var(--chocolate); }
.section--invert .btn--primary:hover { background: #E2DBCE; }
.section--invert .btn--secondary { color: var(--cream); border-color: var(--cream); }
.section--invert .btn--secondary:hover { background: var(--cream); color: var(--chocolate); }