/* ============================================================
   RIMBA ESCAPE · Design System Foundations
   Quiet, golden, jungle-true.
   ============================================================ */

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

:root {
  /* ---------- Brand palette (raw) ---------- */
  --rimba-forest:  #1a2e1a;   /* deep canopy — primary dark */
  --rimba-moss:    #3d5c2a;   /* moss green — supporting dark */
  --rimba-sage:    #6b8c52;   /* sage — mid green */
  --rimba-gold:    #c9a84c;   /* lantern gold — accent */
  --rimba-sand:    #f0e8d5;   /* sand — primary light */
  --rimba-bark:    #7a4e2a;   /* bark — warm wood */

  /* Subtle tonal extensions of the palette (warm-shifted) */
  --rimba-forest-deep: #11201f;
  --rimba-sand-soft:   #faf5e8;
  --rimba-paper:       #f6efde;
  --rimba-stone:       #d6cdb4;
  --rimba-ink:         #1f261b;     /* near-black, warm */
  --rimba-mist:        rgba(240, 232, 213, 0.62);

  /* ---------- Semantic surface tokens ---------- */
  --bg:           var(--rimba-sand);
  --bg-soft:      var(--rimba-sand-soft);
  --bg-paper:     var(--rimba-paper);
  --bg-dark:      var(--rimba-forest);
  --bg-dark-deep: var(--rimba-forest-deep);

  --fg:           var(--rimba-ink);
  --fg-1:         var(--rimba-forest);     /* primary text */
  --fg-2:         #4a4636;                  /* secondary text — warm graphite */
  --fg-3:         #8a836f;                  /* tertiary / meta */
  --fg-on-dark:   var(--rimba-sand);
  --fg-on-dark-2: #c4bea7;                  /* secondary on dark */

  --accent:       var(--rimba-gold);
  --accent-warm:  var(--rimba-bark);
  --accent-leaf:  var(--rimba-sage);

  --rule:         rgba(26, 46, 26, 0.16);   /* hairlines on light */
  --rule-strong:  rgba(26, 46, 26, 0.32);
  --rule-on-dark: rgba(240, 232, 213, 0.22);

  /* ---------- Type system ---------- */
  --font-display: "Cormorant Garamond", "Garamond", "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Semantic text styles */
  --h0-size: clamp(56px, 9vw, 132px);
  --h0-line: 0.95;
  --h0-tracking: -0.02em;

  --h1-size: clamp(44px, 6vw, 88px);
  --h1-line: 1.02;
  --h1-tracking: -0.015em;

  --h2-size: clamp(32px, 4vw, 56px);
  --h2-line: 1.08;
  --h2-tracking: -0.01em;

  --h3-size: 28px;
  --h3-line: 1.18;

  --h4-size: 20px;
  --h4-line: 1.3;

  --body-size: 17px;
  --body-line: 1.55;

  --small-size: 14px;
  --small-line: 1.5;

  --eyebrow-size: 11px;
  --eyebrow-tracking: 0.22em;

  /* ---------- Spacing scale (8pt base, warm rhythm) ---------- */
  --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: 144px;

  /* ---------- Radii (gentle, never plastic) ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---------- Shadows (warm, low, never blue) ---------- */
  --shadow-1: 0 1px 2px rgba(26, 46, 26, 0.06), 0 1px 3px rgba(26, 46, 26, 0.04);
  --shadow-2: 0 2px 6px rgba(26, 46, 26, 0.08), 0 8px 24px rgba(26, 46, 26, 0.06);
  --shadow-3: 0 4px 14px rgba(26, 46, 26, 0.10), 0 24px 60px rgba(26, 46, 26, 0.10);
  --shadow-lantern: 0 0 0 1px rgba(201, 168, 76, 0.25), 0 8px 28px rgba(201, 168, 76, 0.18);

  /* ---------- Motion ---------- */
  --ease-quiet: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-fade:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 180ms;
  --dur-2: 320ms;
  --dur-3: 560ms;
  --dur-slow: 900ms;
}

/* ============================================================
   Base resets that flavour the body
   ============================================================ */
html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  font-weight: 400;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   Semantic type classes
   ============================================================ */
.r-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h0-size);
  line-height: var(--h0-line);
  letter-spacing: var(--h0-tracking);
  color: var(--fg-1);
}

.r-h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h1-size);
  line-height: var(--h1-line);
  letter-spacing: var(--h1-tracking);
  color: var(--fg-1);
  margin: 0;
}

.r-h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--h2-size);
  line-height: var(--h2-line);
  letter-spacing: var(--h2-tracking);
  color: var(--fg-1);
  margin: 0;
}

.r-h3, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--h3-size);
  line-height: var(--h3-line);
  color: var(--fg-1);
  margin: 0;
}

.r-h4, h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--h4-size);
  line-height: var(--h4-line);
  letter-spacing: 0.005em;
  color: var(--fg-1);
  margin: 0;
}

.r-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--fg-2);
}

.r-body, p {
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-line);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.r-small {
  font-family: var(--font-body);
  font-size: var(--small-size);
  line-height: var(--small-line);
  color: var(--fg-2);
}

.r-meta {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* Eyebrow / label — uppercase + tracked, used liberally as section markers */
.r-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--eyebrow-size);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Subtle gold accent on hairline rule */
.r-rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.r-rule-gold {
  border: 0;
  border-top: 1px solid var(--accent);
  width: 48px;
  margin: 0;
}

/* Star / ornament line — used in deck headers and dividers */
.r-ornament {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
}
.r-ornament::before,
.r-ornament::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
}