/* ==========================================================================
   KIYON TRAVELS & TOURS — Design Tokens
   Single source of truth for colour, type, spacing, radius and shadow.
   Palette: Deep Forest Green + Warm Sand + Off-White + Charcoal
   (brand colours/fonts not yet finalised by client — developed by the
   website design team to fit wildlife, nature, beaches and culture)
   ========================================================================== */

:root {
  /* ---- Colour: Forest (primary / brand) ---- */
  --color-forest-900: #142B1D;   /* deepest — nav, footer, dark sections */
  --color-forest-700: #1F4029;   /* primary brand green */
  --color-forest-500: #3B6B46;   /* mid green — icons, links on light bg */
  --color-forest-300: #7FA286;   /* soft green — dividers, muted accents */
  --color-forest-100: #E4EDE4;   /* pale green wash — tinted section bg */

  /* ---- Colour: Sand (accent / calls to action) ---- */
  --color-sand-600: #A96A2E;     /* accent hover / pressed */
  --color-sand-500: #C0813F;     /* primary CTA fill */
  --color-sand-300: #E2B87E;     /* badges, highlights */
  --color-sand-100: #F3E3C8;     /* tinted backgrounds */

  /* ---- Colour: Neutral (off-white / charcoal) ---- */
  --color-cream-50:  #FBF7EF;    /* warm off-white — default page bg */
  --color-ivory-0:   #FFFDF9;    /* card / surface white */
  --color-sand-line: #E7DCC4;    /* hairline borders on cream */
  --color-charcoal-900: #24231F; /* body copy / headings on light bg */
  --color-charcoal-600: #58554C; /* secondary copy */
  --color-charcoal-300: #8B877B; /* placeholder / disabled text */

  /* ---- Colour: Functional ---- */
  --color-rating: #C0813F;       /* stars / rating marks */
  --color-whatsapp: #2E7D4F;     /* WhatsApp CTA (kept inside forest family) */
  --color-focus: #C0813F;

  /* ---- Type families ---- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Work Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: 1.0625rem;
  --text-md:   1.25rem;
  --text-lg:   1.5rem;
  --text-xl:   clamp(1.875rem, 1.6rem + 1.3vw, 2.5rem);
  --text-2xl:  clamp(2.375rem, 1.9rem + 2.2vw, 3.4rem);
  --text-3xl:  clamp(2.9rem, 2.2rem + 3.4vw, 4.6rem);

  --leading-tight: 1.08;
  --leading-snug: 1.28;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-wide: 0.08em;
  --tracking-wider: 0.14em;

  /* ---- Spacing scale (8px base) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5.5rem;
  --space-11: 7.5rem;

  /* ---- Layout ---- */
  --container-width: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 2.5rem);

  /* ---- Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-sm: 0 1px 2px rgba(20, 43, 29, 0.06), 0 1px 1px rgba(20, 43, 29, 0.04);
  --shadow-md: 0 8px 24px rgba(20, 43, 29, 0.10), 0 2px 6px rgba(20, 43, 29, 0.06);
  --shadow-lg: 0 20px 48px rgba(20, 43, 29, 0.16), 0 6px 16px rgba(20, 43, 29, 0.08);
  --shadow-inset-line: inset 0 0 0 1px var(--color-sand-line);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 160ms;
  --duration-base: 260ms;
  --duration-slow: 480ms;
}