/*
 * main.css — Design System & CSS Variables
 * Palette verified against: Aman (#F0EDE8 cream),
 * The Ridge Bali (linen), Bisma Eight (terracotta),
 * The Calile Hotel (warm sand + sage),
 * Gundari (off-white panels), Passalacqua (warm white)
 */

:root {
  /* ── COLOR PALETTE ──────────────────────────────── */
  --linen:         #F7F3EC;
  --sand:          #EDE5D8;
  --teak:          #4A3728;
  --teak-mid:      #7A5C44;
  --teak-light:    #A68A6E;
  --stone:         #8C7B6B;
  --sage:          #6B8472;
  --text:          #231B14;
  --text-muted:    #6B5B4E;
  --dark:          #1A1108;
  --white-warm:    #FAF8F4;
  --hero-overlay:  rgba(35, 27, 20, 0.22);
  --cta-overlay:   rgba(74, 55, 40, 0.58);
  --border:        rgba(74, 55, 40, 0.12);

  /* ── TYPOGRAPHY ─────────────────────────────────── */
  --serif:         'Cormorant Garamond', Georgia, serif;
  --sans:          'Jost', system-ui, sans-serif;

  /* ── SPACING SCALE ──────────────────────────────── */
  --sp-2xs:        4px;
  --sp-xs:         8px;
  --sp-sm:         16px;
  --sp-md:         32px;
  --sp-lg:         64px;
  --sp-xl:         100px;
  --sp-2xl:        160px;

  /* ── LAYOUT ─────────────────────────────────────── */
  --max-w:         1240px;
  --max-w-text:    680px;
  --max-w-narrow:  520px;

  /* ── BORDER RADIUS ──────────────────────────────── */
  --radius:        0px;
  --radius-btn:    2px;
  --radius-pill:   40px;

  /* ── ANIMATION ──────────────────────────────────── */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in:       cubic-bezier(0.55, 0, 1, 0.45);
  --speed:         0.4s;
  --speed-slow:    0.7s;
}

/* ── RESET ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
  background-color: var(--linen);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--speed) var(--ease);
}

a:hover { opacity: 0.7; }

button {
  font-family: var(--sans);
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol { list-style: none; }

/* ── SCROLLBAR ────────────────────────────────────── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--sand); }
::-webkit-scrollbar-thumb { background: var(--teak-light); }

/* ── SELECTION ────────────────────────────────────── */
::selection {
  background: var(--teak);
  color: var(--white-warm);
}