/* ============================================================
   Bravo Bali — design tokens.
   This file is the contract: every colour, font, size and timing
   used by the site lives here. Re-skin by changing values only.
============================================================ */
:root {
  /* ---- colour: "Sunlit Bali" palette ---- */
  --sun: #FFD54F;          /* sunshine yellow — primary accent, CTA fill */
  --butter: #FFE8A1;       /* soft butter — tints, highlights */
  --cream: #FFF7E1;        /* warm cream — page background */
  --peach: #FFB366;        /* peach glow — secondary accent */
  --leaf: #A3B454;         /* sunlit green — nature accent */

  /* derived neutrals (the palette has no dark tone, so text/footer use a warm deep brown) */
  --ink: #2B2610;          /* text, dark sections */
  --ink-2: #3C3519;        /* raised surface on dark */
  --green: #5E6C22;        /* sunlit green deepened for text on cream (AA) */
  --green-soft: #E9EEC8;   /* leaf tint for chips / ticks */
  --peach-deep: #B8641A;   /* peach deepened for small text / numerals */

  /* aliases kept so component CSS doesn't change */
  --coral: var(--peach);
  --cta: var(--sun);
  --cta-hover: var(--peach);
  --sand: var(--cream);
  --sand-2: var(--butter);
  --gold: var(--sun);
  --white: #FFFCF2;

  --text: var(--ink);
  --text-soft: #5B5434;
  --text-on-dark: #FFF7E1;
  --text-on-dark-soft: #D9D0AC;
  --line: rgba(43, 38, 16, .15);
  --line-on-dark: rgba(255, 247, 225, .2);

  /* ---- type ---- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: .78rem;
  --fs-sm: .9rem;
  --fs-base: 1rem;
  --fs-lg: 1.2rem;
  --fs-h4: 1.35rem;
  --fs-h3: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-h2: clamp(2rem, 1.4rem + 2.6vw, 3.4rem);
  --fs-h1: clamp(2.6rem, 1.6rem + 4.6vw, 5.6rem);

  /* ---- space ---- */
  --gutter: clamp(1rem, .6rem + 2vw, 2.5rem);
  --wrap: 1240px;
  --section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* ---- shape ---- */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --shadow: 0 1px 2px rgba(43, 38, 16, .06), 0 12px 32px -12px rgba(43, 38, 16, .22);
  --shadow-lg: 0 30px 60px -24px rgba(43, 38, 16, .35);

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 700ms;

  /* ---- layers ---- */
  --z-nav: 50;
  --z-drawer: 45;
  --z-bar: 40;
}