/* ============================================
   AMG SAFARIS — DESIGN TOKENS v5
   Modern luxury safari template
   ============================================ */
:root {
  /* Brand Palette — refined warm gold + deep charcoal */
  --primary:        #C9A24B;
  --primary-dark:   #A6822F;
  --primary-light:  #E4C77E;
  --primary-glow:   rgba(201,162,75,0.35);
  --primary-rgb:    201,162,75;

  --dark:           #0C0E10;
  --dark-mid:       #15181B;
  --dark-soft:      #1E2226;
  --earth:          #3A3322;
  --earth-light:    #564B30;
  --stone:          #6B6259;
  --stone-light:    #9A9189;
  --white:          #FFFFFF;
  --off-white:      #F7F5F1;
  --cream:          #FBFAF7;
  --border:         rgba(12,14,16,0.08);
  --border-light:   rgba(255,255,255,0.08);

  /* Navbar */
  --nav-scroll-bg:  rgba(251,250,247,0.85);
  --nav-scroll-shadow: 0 4px 30px rgba(0,0,0,0.06);

  /* Typography — Sora (display) + Manrope (body) */
  --font-primary: 'Sora', sans-serif;
  --font-body:    'Manrope', sans-serif;

  /* Fluid type scale */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.25rem;  --sp-6: 1.5rem;
  --sp-8: 2rem;     --sp-10: 2.5rem;  --sp-12: 3rem;
  --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-32: 8rem;

  /* Radius — softer, more modern */
  --r-sm: 6px;   --r: 10px;     --r-md: 14px;
  --r-lg: 18px;  --r-xl: 24px;  --r-2xl: 32px;
  --r-3xl: 40px; --r-full: 9999px;

  /* Legacy radius aliases (back-compat with inline styles) */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows — layered, soft */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 6px 20px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg:  0 12px 36px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.05);
  --shadow-xl:  0 22px 56px rgba(0,0,0,0.13), 0 8px 20px rgba(0,0,0,0.06);
  --shadow-2xl: 0 32px 80px rgba(0,0,0,0.18), 0 12px 28px rgba(0,0,0,0.08);
  --shadow-gold: 0 8px 32px rgba(201,162,75,0.32);

  /* Z layers */
  --z-below:-1; --z-base:1; --z-card:10; --z-sticky:100;
  --z-header:200; --z-modal:300; --z-overlay:400; --z-widget:450; --z-top:500;

  /* Transitions */
  --t-fast: 0.15s ease;
  --t: 0.25s ease;
  --t-slow: 0.4s ease;
  --t-spring: cubic-bezier(0.34,1.56,0.64,1);
  --t-smooth: cubic-bezier(0.4,0,0.2,1);

  /* Layout */
  --container-max: 1320px;
  --container-pad: 1.5rem;
  --topbar-h: 36px;
  --header-h: 96px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast:0.01ms; --t:0.01ms; --t-slow:0.01ms; --t-spring:linear; --t-smooth:linear; }
}