/* ============================================
   ENHANCED VISUAL SYSTEM
   ============================================
   Typography refinements, category colors,
   status indicators, and visual polish
   ============================================ */

/* ============================================
   CATEGORY COLORS (for org types)
   ============================================ */
:root {
  /* Tribal Health - Warm Orange */
  --color-tribal-900: #7c2d12;
  --color-tribal-800: #9a3412;
  --color-tribal-700: #c2410c;
  --color-tribal-600: #ea580c;
  --color-tribal-500: #f97316;
  --color-tribal-400: #fb923c;
  --color-tribal-300: #fdba74;
  --color-tribal-200: #fed7aa;
  --color-tribal-100: #ffedd5;

  /* Rural Health - Fresh Green */
  --color-rural-900: #14532d;
  --color-rural-800: #166534;
  --color-rural-700: #15803d;
  --color-rural-600: #16a34a;
  --color-rural-500: #22c55e;
  --color-rural-400: #4ade80;
  --color-rural-300: #86efac;
  --color-rural-200: #bbf7d0;
  --color-rural-100: #dcfce7;

  /* Urban Health - Cool Blue */
  --color-urban-900: #1e3a8a;
  --color-urban-800: #1e40af;
  --color-urban-700: #1d4ed8;
  --color-urban-600: #2563eb;
  --color-urban-500: #3b82f6;
  --color-urban-400: #60a5fa;
  --color-urban-300: #93c5fd;
  --color-urban-200: #bfdbfe;
  --color-urban-100: #dbeafe;
}

/* ============================================
   STATUS COLORS (data quality, freshness)
   ============================================ */
:root {
  /* Complete/Current - Green */
  --status-complete: #10b981;
  --status-complete-bg: rgb(16 185 129 / 10%);
  --status-complete-border: rgb(16 185 129 / 30%);

  /* Partial/Recent - Yellow */
  --status-partial: #f59e0b;
  --status-partial-bg: rgb(245 158 11 / 10%);
  --status-partial-border: rgb(245 158 11 / 30%);

  /* Incomplete/Stale - Gray */
  --status-pending: #6b7280;
  --status-pending-bg: rgb(107 114 128 / 10%);
  --status-pending-border: rgb(107 114 128 / 30%);

  /* Error/Critical - Red */
  --status-error: #ef4444;
  --status-error-bg: rgb(239 68 68 / 10%);
  --status-error-border: rgb(239 68 68 / 30%);
}

/* ============================================
   ENHANCED TYPOGRAPHY
   ============================================ */

/* Heading refinements */
h1,
.heading-1 {
  font-size: var(--text-5xl) !important;
  /* 48px */
  font-weight: var(--font-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin-bottom: var(--space-6) !important;
  text-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

h2,
.heading-2 {
  font-size: var(--text-4xl) !important;
  /* 36px */
  font-weight: var(--font-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin-bottom: var(--space-5) !important;
}

h3,
.heading-3 {
  font-size: var(--text-3xl) !important;
  /* 30px */
  font-weight: var(--font-semibold) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
  margin-bottom: var(--space-4) !important;
}

h4,
.heading-4 {
  font-size: var(--text-xl) !important;
  /* 20px */
  font-weight: var(--font-semibold) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-normal) !important;
  margin-bottom: var(--space-3) !important;
}

h5,
.heading-5 {
  font-size: var(--text-lg) !important;
  /* 18px */
  font-weight: var(--font-medium) !important;
  line-height: var(--leading-normal) !important;
  margin-bottom: var(--space-2) !important;
}

/* Body text refinements */
.body-large {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-neutral-200);
}

.body-small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-neutral-300);
}

/* Mobile typography scaling */
@media (width <=768px) {

  h1,
  .heading-1 {
    font-size: var(--text-4xl) !important;
    /* 36px on mobile */
  }

  h2,
  .heading-2 {
    font-size: var(--text-3xl) !important;
    /* 30px on mobile */
  }

  h3,
  .heading-3 {
    font-size: var(--text-2xl) !important;
    /* 24px on mobile */
  }
}

/* ============================================
   ENHANCED GRADIENTS
   ============================================ */

:root {
  /* Stronger, more visible gradients */
  --gradient-hero: linear-gradient(135deg,
      rgb(126 34 206 / 95%) 0%,
      rgb(6 182 212 / 85%) 100%);
  --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  --gradient-secondary: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  --gradient-accent: linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
  --gradient-overlay-dark: linear-gradient(180deg,
      rgb(17 24 39 / 85%) 0%,
      rgb(31 41 55 / 92%) 100%);

  /* Category gradients */
  --gradient-tribal: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
  --gradient-rural: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
  --gradient-urban: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

/* ============================================
   STATUS BADGES
   ============================================ */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

.badge-state {
  /* Higher-contrast neutral pill for accessibility */
  background: var(--color-neutral-800);
  color: var(--color-neutral-50);
  border: 1px solid var(--color-neutral-700);
}

.badge-sites {
  background: var(--status-complete-bg);
  color: var(--status-complete);
  border: 1px solid var(--status-complete-border);
}

.badge-pending {
  background: var(--status-pending-bg);
  color: var(--status-pending);
  border: 1px solid var(--status-pending-border);
}

.badge-complete {
  background: var(--status-complete-bg);
  color: var(--status-complete);
  border: 1px solid var(--status-complete-border);
}

.badge-partial {
  background: var(--status-partial-bg);
  color: var(--status-partial);
  border: 1px solid var(--status-partial-border);
}

.badge-tribal {
  background: rgb(249 115 22 / 10%);
  color: var(--color-tribal-400);
  border: 1px solid rgb(249 115 22 / 30%);
}

.badge-rural {
  background: rgb(34 197 94 / 10%);
  color: var(--color-rural-400);
  border: 1px solid rgb(34 197 94 / 30%);
}

.badge-urban {
  background: rgb(59 130 246 / 10%);
  color: var(--color-urban-400);
  border: 1px solid rgb(59 130 246 / 30%);
}

/* ============================================
   ENHANCED CARD SYSTEM
   ============================================ */

.card {
  background: var(--glass-background);
  backdrop-filter: blur(var(--blur-md));
  backdrop-filter: blur(var(--blur-md));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-glass-md);
  transition: all var(--duration-base) var(--ease-out);
}

.card:hover {
  background: var(--glass-background-hover);
  border-color: var(--glass-border-strong);
  transform: translateY(-8px);
  box-shadow: var(--shadow-glass-lg);
}

/* Category-accented cards */
.card-tribal {
  border-top: 3px solid var(--color-tribal-500);
}

.card-tribal:hover {
  box-shadow: var(--shadow-glass-lg), 0 0 24px rgb(249 115 22 / 20%);
}

.card-rural {
  border-top: 3px solid var(--color-rural-500);
}

.card-rural:hover {
  box-shadow: var(--shadow-glass-lg), 0 0 24px rgb(34 197 94 / 20%);
}

.card-urban {
  border-top: 3px solid var(--color-urban-500);
}

.card-urban:hover {
  box-shadow: var(--shadow-glass-lg), 0 0 24px rgb(59 130 246 / 20%);
}

/* ============================================
   LOGO ANIMATIONS
   ============================================ */

@keyframes fadeInLogo {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.org-logo {
  animation: fadeInLogo var(--duration-base) var(--ease-out);
}

.org-logo-wrap.has-logo .org-logo {
  opacity: 1;
}

/* Enhanced brand ring with category colors */
.org-logo-wrap.has-logo.brand-tribal {
  box-shadow: 0 0 0 3px rgb(249 115 22 / 30%);
}

.org-logo-wrap.has-logo.brand-rural {
  box-shadow: 0 0 0 3px rgb(34 197 94 / 30%);
}

.org-logo-wrap.has-logo.brand-urban {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 30%);
}

/* ============================================
   SKELETON LOADERS
   ============================================ */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

.skeleton {
  background: linear-gradient(90deg,
      var(--glass-background) 0%,
      var(--glass-background-strong) 50%,
      var(--glass-background) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
  border-radius: var(--radius-base);
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-heading {
  height: 2em;
  margin-bottom: 1em;
}

.skeleton-image {
  aspect-ratio: 16/9;
  width: 100%;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.mb-2 {
  margin-bottom: var(--space-2);
}

.mb-4 {
  margin-bottom: var(--space-4);
}

.mb-6 {
  margin-bottom: var(--space-6);
}

.mb-8 {
  margin-bottom: var(--space-8);
}

.flex {
  display: flex;
}

.gap-2 {
  gap: var(--space-2);
}

.gap-4 {
  gap: var(--space-4);
}

.text-center {
  text-align: center;
}

/* Gradient text */
.text-gradient-primary {
  background: var(--gradient-primary);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-secondary {
  background: var(--gradient-secondary);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Color utilities */
.text-neutral-200 {
  color: var(--color-neutral-200);
}

.text-neutral-300 {
  color: var(--color-neutral-300);
}

.text-neutral-400 {
  color: var(--color-neutral-400);
}