/* ============================================================
   SOUTH ZONE — DESIGN TOKENS
   The one palette, type scale, radius and motion set that the
   menu engine, the child theme and the Elementor kit all share.
   Elementor's Site Settings mirror these values (tools/kit-globals.php
   in the site repo), so a change here should be made there too.
   ============================================================ */

:root {
  /* ---- Brand core ---- */
  --sz-saffron:      #FEBC11;
  --sz-espresso:     #21170E;
  --sz-chilli:       #D7263D;
  --sz-cream:        #EFE1D5;
  --sz-leaf:         #537033;
  --sz-terracotta:   #BA4526;
  --sz-white:        #FFFFFF;

  /* ---- Tints and shades ---- */
  --sz-saffron-600:  #E5A800;
  --sz-saffron-300:  #FFD972;
  --sz-saffron-100:  #FFF1CC;
  --sz-espresso-900: #160F08;
  --sz-espresso-700: #3B2A1F;
  --sz-espresso-500: #60442C;
  --sz-cream-200:    #E4D2C2;
  --sz-cream-50:     #FBF6F0;

  /* ---- Functional ---- */
  --sz-veg-green:    #1F8A3B;
  --sz-wa:           #25D366;
  --sz-wa-ink:       #073B1E;

  /* ---- Semantic ---- */
  --text-on-light:   var(--sz-espresso);
  --text-muted:      var(--sz-espresso-500);
  --border-on-light: var(--sz-cream-200);
  --surface-paper:   var(--sz-white);

  /* ---- Type ---- */
  --font-display: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Caveat", "Segoe Script", cursive;

  /* ---- Spacing (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Radii: rounded, never sharp ---- */
  --radius-sm:   12px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ---- Shadows: warm, never grey ---- */
  --shadow-sm:  0 2px 8px rgba(33, 23, 14, 0.08);
  --shadow-md:  0 10px 28px rgba(33, 23, 14, 0.14);
  --shadow-lg:  0 18px 48px rgba(33, 23, 14, 0.22);

  /* ---- Layout ---- */
  --container-max: 1200px;
  --header-h:      72px;
  --bottombar-h:   64px;
  --hit-target:    44px;

  /* ---- Motion ---- */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:  140ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
}