/* ============================================
   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: '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);
}