/* ==========================================================================
   CITY MAINTAINANCE — DESIGN TOKENS & SYSTEM VARIABLES
   ========================================================================== */

:root {
  /* Brand Colors */
  --cm-primary: #0056E0;
  --cm-primary-hover: #0045B5;
  --cm-primary-light: #EFF6FF;
  --cm-primary-glow: rgba(0, 86, 224, 0.25);
  
  --cm-accent-cyan: #00D2FF;
  --cm-accent-teal: #0EA5E9;
  --cm-accent-gradient: linear-gradient(135deg, #00D2FF 0%, #0066FF 50%, #0040C1 100%);
  --cm-hero-gradient: linear-gradient(135deg, #F0F7FF 0%, #E0EFFF 50%, #F5FAFF 100%);
  --cm-card-gradient: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
  
  /* WhatsApp Identity */
  --cm-whatsapp: #25D366;
  --cm-whatsapp-hover: #1EBE5D;
  --cm-whatsapp-dark: #075E54;
  --cm-whatsapp-light: #E7F9EE;
  --cm-whatsapp-glow: rgba(37, 211, 102, 0.35);

  /* Semantic UI Colors */
  --cm-success: #10B981;
  --cm-success-light: #ECFDF5;
  --cm-warning: #F59E0B;
  --cm-warning-light: #FEF3C7;
  --cm-danger: #EF4444;
  --cm-danger-light: #FEF2F2;
  --cm-info: #3B82F6;
  --cm-info-light: #EFF6FF;

  /* Neutral Surface & Background Colors */
  --cm-bg: #F8FAFC;
  --cm-bg-alt: #F1F5F9;
  --cm-surface: #FFFFFF;
  --cm-surface-subtle: #F8FAFC;
  --cm-surface-glass: rgba(255, 255, 255, 0.85);
  --cm-surface-glass-border: rgba(255, 255, 255, 0.6);

  /* Typography Colors */
  --cm-text-main: #0F172A;
  --cm-text-secondary: #475569;
  --cm-text-muted: #64748B;
  --cm-text-light: #94A3B8;
  --cm-text-inverted: #FFFFFF;
  --cm-text-brand: #0056E0;

  /* Borders & Dividers */
  --cm-border-light: #F1F5F9;
  --cm-border: #E2E8F0;
  --cm-border-dark: #CBD5E1;
  --cm-border-focus: #0056E0;

  /* Typography */
  --cm-font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --cm-font-heading: 'Plus Jakarta Sans', 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --cm-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Font Sizes */
  --cm-text-xs: 0.75rem;    /* 12px */
  --cm-text-sm: 0.875rem;   /* 14px */
  --cm-text-base: 1rem;     /* 16px */
  --cm-text-lg: 1.125rem;   /* 18px */
  --cm-text-xl: 1.25rem;    /* 20px */
  --cm-text-2xl: 1.5rem;    /* 24px */
  --cm-text-3xl: 1.875rem;  /* 30px */
  --cm-text-4xl: 2.25rem;   /* 36px */
  --cm-text-5xl: 3rem;      /* 48px */

  /* Spacing */
  --cm-space-1: 0.25rem;  /* 4px */
  --cm-space-2: 0.5rem;   /* 8px */
  --cm-space-3: 0.75rem;  /* 12px */
  --cm-space-4: 1rem;     /* 16px */
  --cm-space-5: 1.25rem;  /* 20px */
  --cm-space-6: 1.5rem;   /* 24px */
  --cm-space-8: 2rem;     /* 32px */
  --cm-space-10: 2.5rem;  /* 40px */
  --cm-space-12: 3rem;    /* 48px */
  --cm-space-16: 4rem;    /* 64px */

  /* Border Radii */
  --cm-radius-xs: 4px;
  --cm-radius-sm: 8px;
  --cm-radius-md: 12px;
  --cm-radius-lg: 16px;
  --cm-radius-xl: 20px;
  --cm-radius-2xl: 24px;
  --cm-radius-full: 9999px;

  /* Shadows (Depth & Elevation) */
  --cm-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --cm-shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --cm-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04);
  --cm-shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, 0.1), 0 4px 8px -2px rgba(15, 23, 42, 0.05);
  --cm-shadow-xl: 0 20px 32px -8px rgba(15, 23, 42, 0.12), 0 8px 16px -4px rgba(15, 23, 42, 0.06);
  --cm-shadow-glow-primary: 0 8px 25px rgba(0, 86, 224, 0.28);
  --cm-shadow-glow-whatsapp: 0 8px 25px rgba(37, 211, 102, 0.35);

  /* Transitions & Animation Timings */
  --cm-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cm-transition-base: 220ms cubic-bezier(0.4, 0, 0.2, 1);
  --cm-transition-smooth: 320ms cubic-bezier(0.16, 1, 0.3, 1);
  --cm-transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-Index Hierarchy (Strictly ordered: Modals > Drawers > Backdrops > Nav > Header) */
  --cm-z-base: 1;
  --cm-z-sticky: 40;
  --cm-z-header: 100;
  --cm-z-bottom-nav: 150;
  --cm-z-drawer-backdrop: 400;
  --cm-z-drawer: 500;
  --cm-z-modal-backdrop: 600;
  --cm-z-modal: 700;
  --cm-z-toast: 900;
  --cm-z-tooltip: 1000;

  /* Layout Max Widths */
  --cm-container-max: 1320px;
  --cm-header-height: 76px;
  --cm-category-bar-height: 48px;
  --cm-bottom-nav-height: 64px;
}