/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Organic Urban — Single Source of Truth
   ============================================ */

:root {
   /* ============================================
     COLOR SYSTEM — Natural Earthy Tones
     ============================================ */
   --bg-light: #F7F5F2;
   --bg-soft: #EFE9E1;
   --bg-cream: #FAF8F4;
   --text-dark: #1E1919;
   --text-muted: #736C64;
   --text-light: #9A938A;
   --accent-sage: #7A9A7A;
   --accent-sage-dark: #6B8B6A;
   --accent-earth: #8B7355;
   --accent-clay: #D4A574;
   --border-soft: #E5E0D8;
   --white: #FFFFFF;

   /* ============================================
     TYPOGRAPHY
     ============================================ */
   --font-serif: 'Canela', 'Cormorant Garamond', Georgia, serif;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

   /* ============================================
     SPACING SYSTEM
     ============================================ */
   --spacing-xs: 0.5rem;
   --spacing-sm: 1rem;
   --spacing-md: 1.5rem;
   --spacing-lg: 2rem;
   --spacing-xl: 3rem;
   --spacing-2xl: 4rem;

   /* ============================================
     Z-INDEX SCALE (Explicit Hierarchy)
     Higher = on top. Each layer clearly defined.
     ============================================ */
   --z-base: 1;
   --z-dropdown: 1000;
   --z-sticky: 2000;
   --z-overlay: 3000;
   --z-modal: 4000;
   --z-toast: 5000;
   --z-chatbot: 8000;
   /* Chatbot below bottom nav */
   --z-bottom-nav: 9000;
   /* Mobile bottom nav */
   --z-mobile-nav: 9500;
   /* Mobile nav drawer overlay */
   --z-header: 10000;
   /* Header always on top */
   --z-critical: 99999;
   /* Emergency overlays only */

   /* ============================================
     LAYOUT CONSTANTS
     ============================================ */
   --header-height: 72px;
   --header-height-mobile: 60px;
   --mobile-bottom-nav-height: 64px;
   --chatbot-button-size: 60px;
   --chatbot-button-size-mobile: 44px;

   /* ============================================
     FOOTER SPACING (SINGLE SOURCE OF TRUTH)
     ============================================ */
   --footer-padding-desktop: 48px 24px 32px;
   --footer-padding-mobile: 24px 16px 20px;
   --footer-padding-bottom-mobile: calc(20px + var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom));

   /* ============================================
     TRANSITIONS
     ============================================ */
   --transition-smooth: all 0.3s ease;
   --transition-slow: all 0.5s ease;

   /* ============================================
     MOBILE DESIGN TOKENS
     ============================================ */

   /* Breakpoints */
   --mobile-breakpoint: 768px;
   --mobile-small: 320px;
   --mobile-medium: 375px;
   --mobile-large: 414px;
   --tablet-breakpoint: 1024px;

   /* Mobile Spacing */
   --mobile-spacing-xs: 0.5rem;
   /* 8px */
   --mobile-spacing-sm: 0.75rem;
   /* 12px */
   --mobile-spacing-md: 1rem;
   /* 16px */
   --mobile-spacing-lg: 1.5rem;
   /* 24px */
   --mobile-spacing-xl: 2rem;
   /* 32px */

   --mobile-padding-section: var(--mobile-spacing-md);
   --mobile-padding-container: var(--mobile-spacing-md);

   /* Mobile Typography */
   --mobile-font-size-base: 16px;
   --mobile-font-size-sm: 14px;
   --mobile-font-size-lg: 18px;
   --mobile-line-height: 1.6;

   --mobile-heading-size-h1: 1.75rem;
   /* 28px */
   --mobile-heading-size-h2: 1.5rem;
   /* 24px */
   --mobile-heading-size-h3: 1.25rem;
   /* 20px */

   /* Touch Targets */
   --mobile-touch-target-min: 44px;
   --mobile-button-height: 48px;
   --mobile-input-height: 48px;

   /* Safe Areas (iOS) */
   --mobile-safe-area-top: env(safe-area-inset-top);
   --mobile-safe-area-bottom: env(safe-area-inset-bottom);
   --mobile-safe-area-left: env(safe-area-inset-left);
   --mobile-safe-area-right: env(safe-area-inset-right);
}