/* Apple Tinting Support CSS
 * This file provides enhanced support for Apple's automatic icon tinting
 * while preserving the original SVG colors and design
 */

:root {
  /* Primary app colors that work with Apple's tinting - Organization Red */
  --app-primary-color: #b80a1c;
  --app-secondary-color: #ffffff;
  --app-accent-color: #000000;
  
  /* Light theme adaptations */
  --app-tint-light: #b80a1c;
  --app-background-light: #ffffff;
  --app-surface-light: #f5f5f5;
  
  /* Dark theme adaptations */
  --app-tint-dark: #d41f2f;
  --app-background-dark: #121212;
  --app-surface-dark: #1e1e1e;
}

/* Support for automatic theme switching */
@media (prefers-color-scheme: light) {
  :root {
    --app-current-tint: var(--app-tint-light);
    --app-current-background: var(--app-background-light);
    --app-current-surface: var(--app-surface-light);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-current-tint: var(--app-tint-dark);
    --app-current-background: var(--app-background-dark);
    --app-current-surface: var(--app-surface-dark);
  }
}

/* Apple PWA specific styling */
@supports (-webkit-appearance: none) {
  /* iOS Safari specific enhancements */
  body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Status bar area styling for notched devices */
  .app-header {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Bottom safe area for home indicator */
  .app-footer {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Enhanced support for Apple's dynamic theming */
@media (dynamic-range: high) {
  :root {
    /* Enhanced colors for devices that support wider color gamuts - Organization Red */
    --app-primary-color: color(display-p3 0.722 0.039 0.110);
    --app-secondary-color: color(display-p3 1.000 1.000 1.000);
  }
}

/* Icon container styling that works with Apple's tinting */
.app-icon {
  /* Preserve original SVG colors while allowing system tinting */
  color-scheme: light dark;
  contain: style;
}

/* Status bar styling for better integration */
@media (display-mode: standalone) {
  body {
    /* Ensure content doesn't overlap with status bar */
    padding-top: env(safe-area-inset-top);
  }
}