/*
 * Design Tokens System - Cofinancia.me
 * Modern CSS Custom Properties following Material Design and Apple HIG principles
 * 
 * Architecture: Semantic tokens built on primitive values
 * Compatibility: CSS Custom Properties Level 1 (all modern browsers)
 * Safe Area: CSS Environment Variables Level 1 (iOS Safari 11.2+)
 */

:root {
  /* ============================================
   * PRIMITIVE TOKENS (Base Values)
   * ============================================ */
  
  /* Spacing Scale (8pt grid system) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-xxxl: 64px;

  /* Z-Index Scale (Layered approach) */
  --z-base: 1;
  --z-elevated: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 9000;
  --z-modal: 9500;
  --z-popover: 9800;
  --z-tooltip: 9900;
  --z-toast: 9999;

  /* Border Radius Scale */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50%;

  /* Color Primitives */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: rgba(255, 255, 255, 0.05);
  --color-gray-100: rgba(255, 255, 255, 0.1);
  --color-gray-200: rgba(255, 255, 255, 0.2);
  --color-gray-300: rgba(255, 255, 255, 0.3);
  --color-gray-400: rgba(255, 255, 255, 0.4);
  --color-gray-500: rgba(255, 255, 255, 0.5);
  --color-gray-700: rgba(0, 0, 0, 0.7);
  --color-gray-800: rgba(0, 0, 0, 0.8);
  --color-gray-900: rgba(0, 0, 0, 0.9);

  /* ============================================
   * SAFE AREA TOKENS (iOS/Android Compatibility)
   * ============================================ */
  
  /* Safe Area Insets with Fallbacks */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);

  /* Computed Safe Area Spacing */
  --safe-space-top: calc(var(--space-md) + var(--safe-area-top));
  --safe-space-bottom: calc(var(--space-md) + var(--safe-area-bottom));
  --safe-space-left: calc(var(--space-md) + var(--safe-area-left));
  --safe-space-right: calc(var(--space-md) + var(--safe-area-right));

  /* ============================================
   * SEMANTIC TOKENS (Component Level)
   * ============================================ */

  /* Surface Colors */
  --surface-overlay-weak: var(--color-gray-100);
  --surface-overlay-medium: var(--color-gray-200);
  --surface-overlay-strong: var(--color-gray-800);
  --surface-overlay-intense: var(--color-gray-900);

  /* Interactive States */
  --interactive-primary: var(--color-white);
  --interactive-primary-hover: var(--color-gray-400);
  --interactive-secondary: var(--color-gray-200);
  --interactive-secondary-hover: var(--color-gray-300);

  /* Text Colors */
  --text-primary: var(--color-white);
  --text-secondary: var(--color-black);
  --text-muted: var(--color-gray-300);

  /* ============================================
   * MOBILE NAVIGATION TOKENS (Specific Use Case)
   * ============================================ */

  /* Mobile Navigation Positioning */
  --mobile-nav-bottom-safe: calc(var(--space-xxl) + var(--safe-area-bottom));
  --mobile-nav-bottom-compact: calc(var(--space-lg) + var(--safe-area-bottom));
  --mobile-nav-side-margin: var(--safe-space-left);

  /* Mobile Navigation Styling */
  --mobile-nav-background: var(--surface-overlay-strong);
  --mobile-nav-backdrop-blur: blur(10px);
  --mobile-nav-border-radius: var(--radius-xl);
  --mobile-nav-padding: var(--space-md);
  --mobile-nav-gap: var(--space-sm);
  --mobile-nav-z-index: var(--z-popover);

  /* Mobile Navigation Buttons */
  --mobile-nav-button-size: 36px;
  --mobile-nav-button-radius: var(--radius-full);
  --mobile-nav-button-background: var(--interactive-secondary);
  --mobile-nav-button-background-active: var(--interactive-primary);
  --mobile-nav-button-color: var(--text-primary);
  --mobile-nav-button-color-active: var(--text-secondary);

  /* Shadow System */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.4);

  /* ============================================
   * RESPONSIVE BREAKPOINTS (Container Queries Ready)
   * ============================================ */
  
  /* Mobile First Breakpoints */
  --breakpoint-mobile: 320px;
  --breakpoint-mobile-lg: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-desktop-lg: 1440px;

  /* ============================================
   * ANIMATION TOKENS
   * ============================================ */
  
  /* Duration Scale */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;

  /* Easing Functions */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ============================================
   * ACCESSIBILITY TOKENS
   * ============================================ */
  
  /* Focus Ring */
  --focus-ring-color: var(--interactive-primary);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color);

  /* Touch Target Minimum */
  --touch-target-min: 44px; /* iOS HIG minimum */

  /* ============================================
   * COMPONENT-SPECIFIC TOKENS
   * ============================================ */

  /* Close Button */
  --close-button-size: 50px;
  --close-button-background: var(--surface-overlay-strong);
  --close-button-position-safe: var(--safe-space-top);

  /* Zoom Controls */
  --zoom-control-size: 42px;
  --zoom-control-background: var(--surface-overlay-medium);

  /* Fullscreen Button */
  --fullscreen-button-background: var(--surface-overlay-medium);
  --fullscreen-button-hover: var(--surface-overlay-strong);
}

/* ============================================
 * MEDIA QUERY ADJUSTMENTS
 * ============================================ */

/* Adjust tokens for larger mobile devices */
@media (min-width: 480px) {
  :root {
    --mobile-nav-button-size: 40px;
    --mobile-nav-padding: var(--space-lg);
  }
}

/* Adjust tokens for tablet and up */
@media (min-width: 768px) {
  :root {
    /* Reset mobile-specific values for larger screens */
    --mobile-nav-bottom-safe: var(--space-lg);
    --mobile-nav-bottom-compact: var(--space-md);
  }
}

/* ============================================
 * DARK MODE SUPPORT (Future Enhancement)
 * ============================================ */

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode adjustments */
    --surface-overlay-weak: var(--color-gray-50);
    --surface-overlay-medium: var(--color-gray-100);
    /* Additional dark mode tokens can be added here */
  }
}

/* ============================================
 * REDUCED MOTION SUPPORT
 * ============================================ */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: var(--duration-instant);
    --duration-normal: var(--duration-instant);
    --duration-slow: var(--duration-instant);
  }
}

/* ============================================
 * HIGH CONTRAST SUPPORT
 * ============================================ */

@media (prefers-contrast: high) {
  :root {
    --mobile-nav-background: var(--color-black);
    --interactive-primary: var(--color-white);
    --interactive-secondary: var(--color-gray-300);
  }
}