/**
 * COEUS DESIGN SYSTEM V2 - CONSOLIDATED VARIABLES
 *
 * PURPOSE:
 * Universal design tokens (colors, spacing, effects)
 * Theme-specific colors defined in themes-v2.css
 *
 * CONSOLIDATION:
 * - Removed dual typography systems (iOS + Fluid)
 * - Container-aware scaling handles responsive fonts
 * - Kept universal tokens only (spacing, radius, shadows, etc.)
 * - iOS system colors kept (constant across themes)
 *
 * DEPENDENCIES: None (loaded first)
 * VERSION: 2.0.0
 * CREATED: 2025-11-18
 */

:root {
  /* ============================================ */
  /*           FONT SCALING SYSTEM                */
  /* ============================================ */
  /**
   * Base font scale - controlled by theme-manager.js
   * S=0.875, M=1, L=1.125, XL=1.25
   * Used in typography-v2.css for container-aware scaling
   */
  --font-scale: 1;

  /**
   * Depth scale - automatic scaling based on container depth
   * Set dynamically by container-aware.css
   * Nesting depth 0=1.0, 1=0.95, 2=0.90, 3=0.85
   */
  --depth-scale: 1;

  /* ============================================ */
  /*           iOS SYSTEM COLORS                  */
  /* ============================================ */
  /**
   * These colors remain constant across all themes
   * Used for semantic actions (success, error, warning, info)
   */
  --ios-system-blue: #007AFF;
  --ios-system-green: #34C759;
  --ios-system-indigo: #5856D6;
  --ios-system-orange: #FF9500;
  --ios-system-pink: #FF2D92;
  --ios-system-purple: #AF52DE;
  --ios-system-red: #FF3B30;
  --ios-system-teal: #5AC8FA;
  --ios-system-yellow: #FFCC00;

  /* RGB values for glass button effects */
  --ios-blue-rgb: 0, 122, 255;
  --ios-green-rgb: 52, 199, 89;
  --ios-orange-rgb: 255, 149, 0;
  --ios-red-rgb: 255, 59, 48;

  /* ============================================ */
  /*           SPACING SYSTEM                     */
  /* ============================================ */
  /**
   * Standardized spacing scale
   * Used by spacing-v2.css utilities (.p-4, .mb-6, etc.)
   */
  --spacing-0: 0;           /* 0px */
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.25rem;     /* 20px */
  --spacing-6: 1.5rem;      /* 24px */
  --spacing-7: 1.75rem;     /* 28px */
  --spacing-8: 2rem;        /* 32px */
  --spacing-10: 2.5rem;     /* 40px */
  --spacing-12: 3rem;       /* 48px */
  --spacing-16: 4rem;       /* 64px */
  --spacing-20: 5rem;       /* 80px */
  --spacing-24: 6rem;       /* 96px */

  /* Legacy aliases (for backwards compatibility during migration) */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-12);
  --spacing-3xl: var(--spacing-16);

  /* ============================================ */
  /*           BORDER RADIUS                      */
  /* ============================================ */
  /**
   * Consistent rounding scale
   * Used for cards, buttons, inputs, containers
   */
  --radius-none: 0;
  --radius-sm: 0.5rem;      /* 8px */
  --radius-md: 1rem;        /* 16px */
  --radius-lg: 1.5rem;      /* 24px */
  --radius-xl: 1.6875rem;   /* 27px */
  --radius-2xl: 2rem;       /* 32px */
  --radius-full: 9999px;    /* Pill shape */

  /* ============================================ */
  /*           BLUR EFFECTS                       */
  /* ============================================ */
  /**
   * Glassmorphism backdrop blur levels
   * Used in glass-system-v2.css
   */
  --blur-xs: blur(2px);
  --blur-sm: blur(5px);
  --blur-md: blur(10px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);

  /* Legacy aliases */
  --blur-light: var(--blur-sm);
  --blur-regular: var(--blur-md);
  --blur-strong: var(--blur-lg);
  --blur-ultra: var(--blur-xl);

  /* ============================================ */
  /*           SHADOWS                            */
  /* ============================================ */
  /**
   * Elevation shadow system
   * For modals, dropdowns, floating elements
   */
  --shadow-none: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 16px 48px rgba(0, 0, 0, 0.25);

  /* ============================================ */
  /*           TRANSITIONS                        */
  /* ============================================ */
  /**
   * Animation timing functions
   * Used for interactive elements
   */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-smooth: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================ */
  /*           Z-INDEX SCALE                      */
  /* ============================================ */
  /**
   * Layering system for UI elements
   * Maintains stacking context hierarchy
   */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-toast: 70;
  --z-tooltip: 80;

  /* ============================================ */
  /*           BREAKPOINTS (for reference)        */
  /* ============================================ */
  /**
   * Use em units for responsive breakpoints
   * More accessible than px (respects user font size)
   */
  --breakpoint-sm: 30em;    /* 480px */
  --breakpoint-md: 48em;    /* 768px */
  --breakpoint-lg: 64em;    /* 1024px */
  --breakpoint-xl: 80em;    /* 1280px */
  --breakpoint-2xl: 96em;   /* 1536px */

  /* ============================================ */
  /*           CONTAINER WIDTHS                   */
  /* ============================================ */
  /**
   * Max-width constraints for content containers
   * Used in layout-v2.css
   */
  --container-sm: 40rem;    /* 640px */
  --container-md: 48rem;    /* 768px */
  --container-lg: 64rem;    /* 1024px */
  --container-xl: 80rem;    /* 1280px */
  --container-2xl: 96rem;   /* 1536px */
  --container-full: 100%;

  /* ============================================ */
  /*           GRID COLUMNS                       */
  /* ============================================ */
  /**
   * Standard grid layouts
   * Used for property cards, document grids, etc.
   */
  --grid-cols-1: 1;
  --grid-cols-2: 2;
  --grid-cols-3: 3;
  --grid-cols-4: 4;
  --grid-cols-6: 6;
  --grid-cols-12: 12;
}

/* ============================================ */
/*           DARK MODE ADJUSTMENTS              */
/* ============================================ */
/**
 * Dark mode iOS system color adjustments
 * Makes colors more visible on dark backgrounds
 */
@media (prefers-color-scheme: dark) {
  :root {
    --ios-system-blue: #0A84FF;
    --ios-system-green: #30D158;
    --ios-system-indigo: #5E5CE6;
    --ios-system-orange: #FF9F0A;
    --ios-system-pink: #FF375F;
    --ios-system-purple: #BF5AF2;
    --ios-system-red: #FF453A;
    --ios-system-teal: #64D2FF;
    --ios-system-yellow: #FFD60A;
  }
}