/* ============================================================
   LUVUZONE — Colors & Type foundation
   Editorial · Hebrew-first (RTL) · Aubergine on Cream
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=BBH+Sans+Bartle&family=Caveat:wght@400;500;600;700&family=Frank+Ruhl+Libre:wght@300;400;500;700;900&family=Heebo:wght@300;400;500;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,400&display=swap");

:root {
  /* ---------- COLORS (LOCKED) ---------- */
  /* Variable names kept as "maroon" for stability across stylesheets;
     actual hue updated to Aubergine 2026-04-25 (brand evolution → futuristic-tech) */
  --lv-maroon:      #4B1F4A;   /* Aubergine — signature, dominant */
  --lv-maroon-deep: #2D1230;   /* Aubergine deep — hover / pressed */
  --lv-maroon-soft: #6F2C6E;   /* Aubergine soft — rare, one-off emphasis */
  --lv-cream:       #F0ECE9;   /* background — cool cream, neutralized to harmonize w/ Aubergine (was #F5F0E8 maroon-warm) */
  --lv-cream-deep:  #E8E2DD;   /* card / divider on cream */
  --lv-cream-warm:  #F8F5F1;   /* highest surface */
  --lv-ink:         #1A1512;   /* body text */
  --lv-ink-60:      rgba(26, 21, 18, 0.60);
  --lv-ink-40:      rgba(26, 21, 18, 0.40);
  --lv-ink-15:      rgba(26, 21, 18, 0.15);
  --lv-ink-08:      rgba(26, 21, 18, 0.08);
  --lv-brass:       #B8945F;   /* accent only, never dominant */
  --lv-brass-deep:  #8F6F3F;
  --lv-sage:        #7B8471;   /* data-viz only */

  /* ---------- SEMANTIC ---------- */
  --bg:              var(--lv-cream);
  --bg-raised:       var(--lv-cream-warm);
  --bg-sunken:       var(--lv-cream-deep);
  --fg:              var(--lv-ink);
  --fg-muted:        var(--lv-ink-60);
  --fg-subtle:       var(--lv-ink-40);
  --brand:           var(--lv-maroon);
  --brand-press:     var(--lv-maroon-deep);
  --accent:          var(--lv-brass);
  --rule:            var(--lv-ink-15);
  --rule-soft:       var(--lv-ink-08);

  /* ---------- TYPE FAMILIES ---------- */
  --ff-display:   "BBH Sans Bartle", "Heebo", system-ui, sans-serif; /* logo-matching */
  --ff-editorial: "Frank Ruhl Libre", "Source Serif 4", Georgia, serif; /* Hebrew body */
  --ff-ui:        "Heebo", "Inter", system-ui, sans-serif;
  --ff-citation:  "Source Serif 4", "Frank Ruhl Libre", Georgia, serif;

  /* ---------- TYPE SCALE (editorial) ---------- */
  --t-hero:   clamp(72px, 11vw, 168px);  /* huge display numbers & monuments */
  --t-d1:     clamp(56px, 7.2vw, 104px);
  --t-d2:     clamp(40px, 5vw, 72px);
  --t-h1:     clamp(32px, 3.4vw, 48px);
  --t-h2:     28px;
  --t-h3:     22px;
  --t-body-l: 20px;
  --t-body:   17px;
  --t-body-s: 15px;
  --t-caption:13px;
  --t-micro:  11px;   /* small-caps eyebrow */

  /* ---------- SPACING (8pt, editorial generous) ---------- */
  --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;
  --s-11: 192px;

  /* ---------- RADII — restrained, almost none ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* ---------- BORDERS ---------- */
  --bw-hair:  0.5px;
  --bw-1:     1px;
  --bw-2:     2px;
  --bw-rule:  1px solid var(--rule);
  --bw-heavy: 2px solid var(--lv-ink);

  /* ---------- SHADOWS (rare, subtle, warm) ---------- */
  --sh-0: none;
  --sh-1: 0 1px 0 rgba(26,21,18,0.04), 0 1px 2px rgba(26,21,18,0.04);
  --sh-2: 0 4px 14px rgba(26,21,18,0.06), 0 1px 2px rgba(26,21,18,0.04);
  --sh-3: 0 18px 40px rgba(26,21,18,0.08);

  /* ---------- MOTION ---------- */
  --ease: cubic-bezier(.2,.6,.2,1);
  --ease-in: cubic-bezier(.4,0,.9,.3);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-4: 700ms;

  /* ---------- LAYOUT ---------- */
  --measure: 62ch;   /* max reading width */
  --gutter: clamp(24px, 5vw, 96px);
  --max-w:  1360px;
}

/* ============================================================
   BASE
   ============================================================ */
html { direction: rtl; }
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-editorial);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "kern", "liga";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lv-maroon); color: var(--lv-cream); }

/* ============================================================
   TYPOGRAPHY ROLES
   ============================================================ */

/* Monumental display — used for logo, hero numbers (₪150 vs ₪7,000) */
.t-hero, h1.t-hero {
  font-family: var(--ff-display);
  font-weight: 400; /* BBH Sans Bartle ships regular; it reads bold */
  font-size: var(--t-hero);
  line-height: 0.86;
  letter-spacing: -0.01em;
  color: var(--brand);
  text-transform: uppercase;
  margin: 0;
}

.t-display-1 {
  font-family: var(--ff-display);
  font-size: var(--t-d1);
  line-height: 0.92;
  letter-spacing: -0.005em;
  color: var(--brand);
  text-transform: uppercase;
  margin: 0;
}
.t-display-2 {
  font-family: var(--ff-display);
  font-size: var(--t-d2);
  line-height: 0.96;
  color: var(--brand);
  text-transform: uppercase;
  margin: 0;
}

/* Editorial — long-form article titles in Hebrew */
h1, .t-h1 {
  font-family: var(--ff-editorial);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 0;
}
h2, .t-h2 {
  font-family: var(--ff-editorial);
  font-weight: 700;
  font-size: var(--t-h2);
  line-height: 1.2;
  color: var(--fg);
  margin: 0;
}
h3, .t-h3 {
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: var(--t-h3);
  line-height: 1.3;
  color: var(--fg);
  margin: 0;
}

/* Body reading */
p, .t-body {
  font-family: var(--ff-editorial);
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--fg);
  max-width: var(--measure);
  text-wrap: pretty;
}
.t-body-l {
  font-family: var(--ff-editorial);
  font-size: var(--t-body-l);
  line-height: 1.55;
  color: var(--fg);
}
.t-body-s {
  font-family: var(--ff-ui);
  font-size: var(--t-body-s);
  line-height: 1.55;
  color: var(--fg);
}

/* UI / captions */
.t-ui {
  font-family: var(--ff-ui);
  font-weight: 500;
  font-size: var(--t-body-s);
  color: var(--fg);
}
.t-caption {
  font-family: var(--ff-ui);
  font-size: var(--t-caption);
  color: var(--fg-muted);
}

/* Small-caps eyebrow — used for citations + section kickers */
.t-eyebrow {
  font-family: var(--ff-ui);
  font-weight: 700;
  font-size: var(--t-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

/* English citations */
.t-citation {
  font-family: var(--ff-citation);
  font-size: var(--t-caption);
  font-style: italic;
  color: var(--fg-muted);
  direction: ltr;
  text-align: left;
}

/* Price — for the BIG contrast pairs */
.t-price {
  font-family: var(--ff-display);
  font-size: var(--t-d1);
  line-height: 1;
  color: var(--brand);
}

/* Hairline rule */
hr, .rule {
  border: 0;
  border-top: var(--bw-1) solid var(--rule);
  margin: var(--s-6) 0;
}

/* Links */
a {
  color: var(--brand);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-1) var(--ease);
}
a:hover { color: var(--brand-press); }