/* ==========================================================================
   OSUKA'S SAFARI & TOURS — Brand tokens (sampled directly from the logo)
   Do not invent new colours. Compose from these.
   ========================================================================== */
:root {
  /* Sunset oranges (logo sky + wordmark gradient) */
  --sunset-700: #b94f08;
  --sunset-600: #c25e0a;
  --sunset-500: #da7a11;   /* primary brand orange */
  --sunset-400: #e58214;
  --sunset-300: #f0a24a;

  /* Ember (the "&" and compass — hot accent, use sparingly) */
  --ember-600: #c9360c;
  --ember-500: #e5400f;
  --ember-400: #e7500a;

  /* Savanna golds (wordmark, lion mane, sun) */
  --gold-600: #df9a24;
  --gold-500: #f8ac12;    /* primary brand gold */
  --gold-400: #f8bc2f;
  --gold-300: #f7ce69;
  --gold-200: #fbe7ac;
  --gold-100: #fdf3d6;

  /* Forest greens (ring, Africa mark, banner) */
  --forest-950: #01110b;  /* near-black green — hero shade, footer */
  --forest-900: #051e0f;
  --forest-800: #0b2e18;
  --forest-700: #123d20;
  --forest-600: #1a4a2a;
  --forest-500: #214c2a;  /* rim green */
  --forest-400: #2f6b3a;
  --forest-300: #4f8a58;

  /* Creams & sands (banner, tagline) */
  --cream-50:  #fffef8;
  --cream-100: #fefef4;   /* page background */
  --cream-200: #fcf8e9;
  --cream-300: #f5edd6;
  --sand-300:  #efe3c4;
  --sand-400:  #e4d3a8;

  /* Warm browns (mane shadows) — warm ink for text on cream */
  --brown-900: #1a1408;
  --brown-800: #482e0b;
  --brown-700: #5e4212;
  --brown-600: #755517;

  /* Semantic */
  --bg:            var(--cream-100);
  --bg-elev:       var(--cream-50);
  --bg-dark:       var(--forest-950);
  --bg-dark-2:     var(--forest-900);
  --ink:           var(--brown-900);
  --ink-soft:      #4a4132;
  --ink-muted:     #7a6f5c;
  --on-dark:       var(--cream-100);
  --on-dark-soft:  rgba(254, 254, 244, .74);
  --on-dark-muted: rgba(254, 254, 244, .52);
  --line:          rgba(26, 20, 8, .12);
  --line-dark:     rgba(254, 254, 244, .14);
  --brand:         var(--sunset-500);
  --brand-strong:  var(--ember-500);
  --accent:        var(--gold-500);
  --success:       var(--forest-400);

  /* Gradients */
  --grad-sunset: linear-gradient(135deg, var(--gold-500) 0%, var(--sunset-500) 55%, var(--ember-500) 100%);
  --grad-sunset-soft: linear-gradient(135deg, var(--gold-400) 0%, var(--sunset-400) 100%);
  --grad-gold-text: linear-gradient(120deg, var(--gold-200) 0%, var(--gold-500) 45%, var(--sunset-400) 100%);
  --grad-forest: linear-gradient(180deg, var(--forest-800) 0%, var(--forest-950) 100%);
  --grad-hero-shade: linear-gradient(180deg, rgba(1,17,11,.55) 0%, rgba(1,17,11,.15) 35%, rgba(1,17,11,.35) 70%, rgba(1,17,11,.92) 100%);
  --grad-card-shade: linear-gradient(180deg, rgba(1,17,11,0) 30%, rgba(1,17,11,.55) 70%, rgba(1,17,11,.92) 100%);

  /* Typography */
  --font-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --font-accent:  "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body:    "DM Sans", "Segoe UI", system-ui, sans-serif;

  --text-xs: .72rem;
  --text-sm: .86rem;
  --text-md: 1rem;
  --text-lg: 1.15rem;
  --text-xl: clamp(1.35rem, 1.1rem + 1vw, 1.7rem);
  --text-2xl: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
  --text-3xl: clamp(2.4rem, 1.6rem + 3.2vw, 4.2rem);
  --text-hero: clamp(2.9rem, 1.6rem + 5.6vw, 6.4rem);

  --tracking-caps: .18em;

  /* Layout */
  --container: min(92vw, 1400px);
  --container-narrow: min(92vw, 1040px);
  --section-y: clamp(72px, 9vw, 140px);
  --gutter: clamp(16px, 2.5vw, 32px);

  /* Radii & shadows */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(26,20,8,.08);
  --shadow-md: 0 10px 30px rgba(26,20,8,.14);
  --shadow-lg: 0 30px 70px rgba(1,17,11,.28);
  --shadow-glow-sunset: 0 12px 40px rgba(218,122,17,.45);
  --shadow-glow-gold: 0 0 0 4px rgba(248,172,18,.25);

  /* Motion */
  --ease-out: cubic-bezier(.22, .75, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: .2s;
  --dur: .45s;
  --dur-slow: .9s;

  /* Header heights (nav.js keeps --header-h updated; hero uses it) */
  --topbar-h: 40px;
  --nav-h: 84px;
  --header-h: calc(var(--topbar-h) + var(--nav-h));

  color-scheme: light;
}