/* ==========================================================
   PAN AFRICA EXPEDITIONS — Design Tokens
   Brand: luxury, warm, African, cinematic · modernized
   ========================================================== */

:root {
  /* Brand palette */
  --deep-brown:     #39250C;
  --charcoal-brown: #4E402F;
  --burnt-gold:     #8C580F;
  --heritage-gold:  #98661D;
  --luxury-gold:    #D8A85B;
  --pale-gold:      #E8CD8A;
  --warm-stone:     #B8A994;
  --soft-taupe:     #887965;
  --ivory-sand:     #DFD7C9;
  --cream:          #F3E3D0;
  --cream-light:    #FBF6ED;
  --cream-dark:     #E8D5BA;

  /* Functional */
  --bg-page:        #FBF6ED;
  --bg-soft:        var(--ivory-sand);
  --bg-dark:        var(--deep-brown);
  --bg-dark-2:      var(--charcoal-brown);
  --text-dark:      #2A1B07;
  --text-muted:     #5C4D38;
  --text-on-dark:   #F4ECD9;
  --text-on-dark-muted: rgba(244, 236, 217, 0.78);

  --border-soft:    rgba(57, 37, 12, 0.10);
  --border-gold:    rgba(216, 168, 91, 0.45);

  /* Layered shadow system — modern colored shadows */
  --shadow-xs:      0 2px 8px rgba(57, 37, 12, 0.05);
  --shadow-sm:      0 4px 16px rgba(57, 37, 12, 0.07);
  --shadow-soft:    0 8px 32px rgba(57, 37, 12, 0.08);
  --shadow-card:    0 12px 40px rgba(57, 37, 12, 0.12), 0 4px 14px rgba(140, 88, 15, 0.06);
  --shadow-card-hover: 0 20px 56px rgba(57, 37, 12, 0.18), 0 6px 20px rgba(140, 88, 15, 0.10);
  --shadow-deep:    0 24px 70px rgba(20, 12, 4, 0.40);
  --shadow-glow:    0 0 60px rgba(216, 168, 91, 0.18);

  /* Typography */
  --font-serif:    "Instrument Serif", Cormorant, Georgia, "Times New Roman", serif;
  --font-script:   "Caveat", "Brush Script MT", cursive;
  --font-sans:     "Comfortaa", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw:          1280px;
  --maxw-narrow:   980px;
  --pad-x:         clamp(20px, 5vw, 64px);
  --section-y:     clamp(72px, 10vw, 130px);
  --radius-sm:     8px;
  --radius-md:     16px;
  --radius-lg:     24px;
  --radius-xl:     32px;
  --radius-pill:   999px;

  /* Gradients */
  --gradient-warm:         linear-gradient(135deg, #EDC57E 0%, #D8A85B 50%, #B5862F 100%);
  --gradient-dark:         linear-gradient(135deg, #39250C 0%, #4E402F 100%);
  --gradient-overlay:      linear-gradient(180deg, rgba(57,37,12,0.50) 0%, rgba(57,37,12,0.15) 35%, rgba(57,37,12,0.35) 65%, rgba(20,12,4,0.88) 100%);
  --gradient-card-top:     linear-gradient(180deg, rgba(216,168,91,0.12) 0%, transparent 80px);
  --gradient-hero-bottom:  linear-gradient(180deg, transparent 55%, rgba(20,12,4,0.55) 100%);

  /* Motion */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-quick:     180ms;
  --dur-base:      280ms;
  --dur-slow:      560ms;
  --dur-reveal:    700ms;
}