global.css

/* Ionicons font for @expo/vector-icons on web
   The TTF is copied from node_modules to public/fonts/ for reliable serving */
@font-face {
  font-family: "ionicons";
  src: url("/fonts/Ionicons.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================================================
   Protocol Guide - Global Styles
   Enterprise-grade styling for fire department & EMS applications
   ============================================================================ */

/* Dark mode typography enhancement for legibility */
.dark body,
[data-theme="dark"] body {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================================
   Base Layer - Foundational Styles
   ============================================================================ */

@layer base {
  /* Improved focus states for accessibility */
  :focus-visible {
    outline: 2px solid #EF4444;
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Smooth scrolling for better UX */
  html {
    scroll-behavior: smooth;
  }

  /* Respect user motion preferences */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

  /* Better text rendering */
  body {
    text-rendering: optimizeLegibility;
  }

  /* Selection styling - brand-consistent */
  ::selection {
    background-color: rgba(239, 68, 68, 0.2);
    color: inherit;
  }

  .dark ::selection,
  [data-theme="dark"] ::selection {
    background-color: rgba(239, 68, 68, 0.3);
  }
}

/* ============================================================================
   Component Layer - Reusable Component Styles
   ============================================================================ */

@layer components {
  /* Professional button transitions */
  .btn-transition {
    transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
                background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 150ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .btn-transition:hover {
    transform: translateY(-1px);
  }

  .btn-transition:active {
    transform: translateY(0);
  }

  /* Card hover effect - subtle elevation change */
  .card-interactive {
    transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1),
                border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15),
                0 4px 6px -2px rgba(0, 0, 0, 0.1);
  }

  /* Loading skeleton pulse animation */
  @keyframes skeleton-pulse {
    0%, 100% {
      opacity: 0.4;
    }
    50% {
      opacity: 0.7;
    }
  }

  .skeleton-pulse {
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Loading dots animation */
  @keyframes loading-dot {
    0%, 80%, 100% {
      opacity: 0.3;
      transform: scale(0.8);
    }
    40% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .loading-dot {
    animation: loading-dot 1.4s ease-in-out infinite both;
  }

  .loading-dot:nth-child(1) {
    animation-delay: 0s;
  }

  .loading-dot:nth-child(2) {
    animation-delay: 0.16s;
  }

  .loading-dot:nth-child(3) {
    animation-delay: 0.32s;
  }

  /* Fade in animation for content */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  /* Stagger children animations */
  .stagger-children > * {
    opacity: 0;
    animation: fade-in-up 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  }

  .stagger-children > *:nth-child(1) { animation-delay: 0ms; }
  .stagger-children > *:nth-child(2) { animation-delay: 50ms; }
  .stagger-children > *:nth-child(3) { animation-delay: 100ms; }
  .stagger-children > *:nth-child(4) { animation-delay: 150ms; }
  .stagger-children > *:nth-child(5) { animation-delay: 200ms; }
}

/* ============================================================================
   Utility Layer - Helper Classes
   ============================================================================ */

@layer utilities {
  /* Balanced text for headings (prevents orphans) */
  .text-balance {
    text-wrap: balance;
  }

  /* Pretty text for paragraphs */
  .text-pretty {
    text-wrap: pretty;
  }

  /* Tabular numbers for data display */
  .tabular-nums {
    font-variant-numeric: tabular-nums;
  }

  /* Hide scrollbar but keep functionality */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Gradient text effect (use sparingly) */
  .text-gradient-primary {
    background: linear-gradient(135deg, #EF4444 0%, #F87171 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ---- Glass surfaces ---- */
  .glass {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .glass-sm {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .glass-lg {
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
  }
  .glass-xl {
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
  }
  .glass-bg-dark {
    background: rgba(30,41,59,0.72);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .glass-bg-light {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(255,255,255,0.20);
  }

  /* Fallback for browsers without backdrop-filter */
  @supports not (backdrop-filter: blur(1px)) {
    .glass, .glass-sm, .glass-lg, .glass-xl {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .glass-bg-dark { background: rgba(30,41,59,0.92); }
    .glass-bg-light { background: rgba(255,255,255,0.92); }
  }

  /* High contrast mode — disable blur, raise opacity */
  @media (prefers-contrast: more) {
    .glass, .glass-sm, .glass-lg, .glass-xl {
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .glass-bg-dark { background: rgba(30,41,59,0.95); }
    .glass-bg-light { background: rgba(255,255,255,0.95); }
  }

  /* Forced colors (Windows high-contrast) */
  @media (forced-colors: active) {
    .glass-bg-dark, .glass-bg-light {
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
    }
  }

  /* Profile card hover */
  .profile-card-hover {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .profile-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.12);
  }
}

/* ============================================================================
   CSS Animations (Web Performance Optimization)
   Lightweight alternatives to react-native-reanimated for web
   ============================================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

.animate-fade-in-down {
  animation: fadeInDown 0.4s ease-out forwards;
}

.animate-slide-in-right {
  animation: slideInRight 0.4s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.4s ease-out forwards;
}

.animate-scale-in {
  animation: scaleIn 0.3s ease-out forwards;
}

/* Initial state for animated elements (prevents flash) */
[class*="animate-"] {
  opacity: 0;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  [class*="animate-"] {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================================
   Web Typography - Match Landing Page
   ============================================================================ */

@media screen {
  body {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-weight: 700;
  }
}