/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   Consolidated design system variables
   ============================================ */

:root {
  /* ==========================================
     Z-INDEX SCALE
     Use these instead of hardcoded z-index values
     ==========================================
     
     Layer hierarchy (from bottom to top):
     - base (1): Default positioned elements
     - dropdown (100): Dropdowns, autocompletes, tooltips in context
     - sticky (200): Sticky headers, fixed input areas
     - modal (500): Panels, side drawers, activity panels
     - overlay (1000): Full-screen overlays, modals, dialogs
     - toast (9000): Notifications, toasts, alerts
     - tooltip (10000): Tooltips that must appear above everything
     ========================================== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-modal: 500;
  --z-overlay: 1000;
  --z-toast: 9000;
  --z-tooltip: 10000;

  /* ==========================================
     RESPONSIVE BREAKPOINTS
     Use with @media (max-width: var(--breakpoint-*))
     Note: CSS custom properties don't work in media queries,
     so use these as reference values:
     
     --breakpoint-sm: 480px   (Small phones, below this is "mobile")
     --breakpoint-md: 768px   (Tablets, below this is "small screens")
     --breakpoint-lg: 1024px  (Desktop, below this is "tablet")
     --breakpoint-xl: 1440px  (Wide desktop)
     --breakpoint-2xl: 1920px (Ultra-wide)
     ========================================== */
  
  /* ==========================================
     SPACING SCALE (4px base)
     Consolidated from app.css
     ========================================== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ==========================================
     TYPOGRAPHY SCALE
     Consolidated from app.css
     ========================================== */
  --font-sans: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 2rem;      /* 32px */

  /* ==========================================
     BORDER RADIUS SCALE
     Use these instead of hardcoded border-radius
     ========================================== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
}