/* ==========================================================================
   Wohnung Prags — Foundations
   Colors, type, spacing, radii, shadows.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Montserrat:wght@300;400;500;600&display=swap');

:root {
  /* ---------- Color: Core palette ---------- */
  --ink:            #0E1620;   /* near-black navy, primary surface for premium dark */
  --ink-2:          #131C28;   /* slightly lifted dark surface */
  --ink-3:          #1B2532;   /* card on ink */
  --night:          #243140;   /* lifted neutral */

  --bone:           #F5F1EA;   /* warm paper white */
  --paper:          #FBF8F3;   /* lightest background */
  --linen:          #ECE6DA;   /* subtle warm divider */
  --stone:          #C9C1B2;   /* muted warm gray */
  --slate:          #6B7280;   /* mid neutral */
  --graphite:       #2A2F38;   /* text on light */

  /* ---------- Color: Accent (gold) ---------- */
  --gold:           #C9A86A;   /* primary brand accent */
  --gold-soft:      #D9BE89;   /* hover / lighter */
  --gold-deep:      #A8884A;   /* pressed / on light */
  --gold-tint:      #EFE5CE;   /* light wash */

  /* ---------- Color: Imagery accents (from photography) ---------- */
  --wood:           #B7855A;   /* warm wood */
  --wine:           #6E2A2C;   /* deep burgundy from sofa */
  --moss:           #5D6B53;   /* muted plant green */

  /* ---------- Semantic foreground / background ---------- */
  --bg:             var(--paper);
  --bg-alt:         var(--bone);
  --surface:        #FFFFFF;
  --surface-dark:   var(--ink);

  --fg:             var(--graphite);
  --fg-muted:       var(--slate);
  --fg-quiet:       #8A8576;
  --fg-on-dark:     var(--bone);
  --fg-muted-dark:  rgba(245, 241, 234, 0.62);
  --fg-quiet-dark:  rgba(245, 241, 234, 0.38);

  --border:         rgba(20, 24, 32, 0.10);
  --border-strong:  rgba(20, 24, 32, 0.18);
  --border-dark:    rgba(245, 241, 234, 0.14);
  --border-gold:    rgba(201, 168, 106, 0.45);

  --accent:         var(--gold);
  --accent-fg:      var(--ink);

  /* ---------- Type families ---------- */
  --font-serif:     'Cormorant Garamond', 'Cormorant', Garamond, 'EB Garamond', 'Times New Roman', serif;
  --font-sans:      'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ---------- Type scale (editorial) ---------- */
  --fs-eyebrow:     12px;
  --fs-label:       13px;
  --fs-caption:     14px;
  --fs-body:        17px;
  --fs-body-lg:     19px;
  --fs-lead:        22px;
  --fs-h6:          18px;
  --fs-h5:          24px;
  --fs-h4:          32px;
  --fs-h3:          44px;
  --fs-h2:          64px;
  --fs-h1:          88px;
  --fs-display:     128px;

  /* ---------- Letter spacing ---------- */
  --ls-tightest:    -0.02em;
  --ls-tight:       -0.01em;
  --ls-normal:      0;
  --ls-wide:        0.08em;
  --ls-wider:       0.18em;   /* tracked small caps labels (signature look) */
  --ls-widest:      0.28em;

  /* ---------- Line heights ---------- */
  --lh-tight:       1.05;
  --lh-snug:        1.15;
  --lh-normal:      1.4;
  --lh-relaxed:     1.6;
  --lh-loose:       1.75;

  /* ---------- Spacing (8pt) ---------- */
  --s-0: 0;
  --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: 128px;

  /* ---------- Radii (sparing — editorial uses sharp edges) ---------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---------- Shadows (soft, subtle — luxury, not lifted) ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 22, 32, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 22, 32, 0.06);
  --shadow-md: 0 8px 24px rgba(14, 22, 32, 0.08);
  --shadow-lg: 0 24px 60px rgba(14, 22, 32, 0.12);
  --shadow-image: 0 30px 80px -20px rgba(14, 22, 32, 0.35);

  /* ---------- Motion ---------- */
  --ease-out:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:      160ms;
  --dur-base:      280ms;
  --dur-slow:      520ms;
  --dur-cinematic: 900ms;

  /* ---------- Layout ---------- */
  --container:     1240px;
  --container-narrow: 880px;
  --gutter:        clamp(20px, 4vw, 56px);
}

/* ==========================================================================
   Element defaults
   ========================================================================== */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg);
  margin: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: var(--ls-normal); }
h5 { font-family: var(--font-serif); font-size: var(--fs-h5); font-weight: 500; line-height: var(--lh-snug); margin: 0; }
h6 { font-family: var(--font-sans); font-size: var(--fs-h6); font-weight: 500; line-height: var(--lh-snug); margin: 0; }

p   { margin: 0 0 var(--s-4); line-height: var(--lh-relaxed); }
p.lead { font-size: var(--fs-lead); font-family: var(--font-serif); font-weight: 400; line-height: var(--lh-normal); color: var(--fg); }

small { font-size: var(--fs-caption); color: var(--fg-muted); }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }

/* ==========================================================================
   Utility text classes (signature looks)
   ========================================================================== */

/* The brand's hallmark: tracked-out small caps label */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 400;
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow--gold { color: var(--gold); }
.eyebrow--light { color: var(--fg-muted-dark); }

/* Editorial display headline with italic emphasis */
.display {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: var(--ls-tightest);
}
.display em, .display .em {
  font-style: italic;
  font-weight: 500;
  color: var(--gold);
}

.headline {
  font-family: var(--font-serif);
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: var(--ls-tightest);
}
.headline em, .headline .em {
  font-style: italic;
  color: var(--gold);
}

/* Caption / fineprint */
.caption {
  font-family: var(--font-sans);
  font-size: var(--fs-caption);
  color: var(--fg-muted);
  line-height: var(--lh-normal);
}

/* Divider with diamond — used between title blocks (see Stamp reference) */
.rule-diamond {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
}
.rule-diamond::before,
.rule-diamond::after {
  content: '';
  flex: 1;
  height: 1px;
  background: currentColor;
  opacity: 0.5;
  max-width: 64px;
}
.rule-diamond .diamond {
  width: 6px; height: 6px;
  background: currentColor;
  transform: rotate(45deg);
}

/* Hairline gold rule (used as headline accent) */
.hairline-gold {
  width: 56px;
  height: 1px;
  background: var(--gold);
  display: block;
}