/* Public 404 Color System */
/* Comprehensive color palette for government transparency documentation */

:root {
  /* === CORE BRAND COLORS === */
  --primary-brand: #d1477d;          /* Dusty pink for alerts/removals - softer than red */
  --primary-brand-hover: #b83968;    /* Darker dusty pink for hover states */
  --primary-brand-light: #f3d5e0;    /* Light dusty pink for backgrounds */
  --primary-brand-dark: #a23359;     /* Dark dusty pink for emphasis */
  
  /* === TEXT HIERARCHY === */
  --text-primary: #111827;           /* Darker gray for better contrast on light backgrounds */
  --text-secondary: #1f2937;         /* Darker medium gray for better visibility */
  --text-muted: #4b5563;             /* Darker gray for subtle text - still readable */
  --text-inverse: #ffffff;           /* White text for dark backgrounds */
  --text-on-gray: #ffffff;           /* White text for gray backgrounds */
  
  /* === BACKGROUND SYSTEM === */
  --bg-primary: #6b7280;             /* Medium gray main background */
  --bg-secondary: #f8fafc;           /* Light gray for contrast sections */
  --bg-tertiary: #ffffff;            /* White for cards and components */
  --bg-accent: #f3d5e0;              /* Light dusty pink accent background */
  
  /* === COMPLEMENTARY COLORS === */
  --complementary-primary: #80796b;   /* Complementary earth tone */
  --complementary-secondary: #6f6b80; /* Complementary purple-gray */
  
  /* === ANALOGOUS COLORS === */
  --analogous-primary: #6e6b80;      /* Analogous purple-gray */
  --analogous-secondary: #6b7c80;    /* Analogous blue-gray */
  
  /* === STATUS & SEMANTIC COLORS === */
  --success-color: #047857;          /* Darker green for better contrast */
  --success-light: #d1fae5;          /* Light green backgrounds */
  --warning-color: #b45309;          /* Darker amber for better contrast */
  --warning-light: #fef3c7;          /* Light amber backgrounds */
  --info-color: #0369a1;             /* Darker blue for better contrast */
  --info-light: #dbeafe;             /* Light blue backgrounds */
  --error-color: var(--primary-brand); /* Dusty pink - errors, removals */
  
  /* === BORDERS & OUTLINES === */
  --border-color: #e5e7eb;           /* Standard borders */
  --border-light: #f3f4f6;          /* Subtle borders */
  --border-focus: var(--info-color); /* Focus states */
  --border-error: var(--error-color); /* Error states */
  --border-on-gray: #9ca3af;        /* Borders on gray backgrounds */
  
  /* === INTERACTIVE STATES === */
  --hover-bg: #f9fafb;              /* Hover background for cards */
  --hover-bg-gray: #9ca3af;         /* Hover background on gray */
  --active-bg: #e5e7eb;             /* Active/pressed states */
  --focus-ring: rgba(2, 132, 199, 0.2); /* Focus ring color */
  
  /* === TRANSPARENCY & SHADOWS === */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-on-gray: 0 4px 12px rgba(0, 0, 0, 0.15);
  
  /* === LEGACY SUPPORT === */
  /* Keep existing variable names for backward compatibility */
  --primary-hue: 210;
  --primary: var(--text-on-gray);
  --primary-hover: var(--text-on-gray);
  --muted-color: var(--text-secondary);
  --accent-color: var(--primary-brand);
  --muted-border-color: var(--border-on-gray);
  --muted-bg: var(--bg-secondary);
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-brand { color: var(--primary-brand) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-info { color: var(--info-color) !important; }
.text-error { color: var(--error-color) !important; }
.text-on-gray { color: var(--text-on-gray) !important; }

.bg-primary { background-color: var(--bg-primary) !important; }
.bg-secondary { background-color: var(--bg-secondary) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }
.bg-brand { background-color: var(--primary-brand) !important; }
.bg-success { background-color: var(--success-light) !important; }
.bg-warning { background-color: var(--warning-light) !important; }
.bg-info { background-color: var(--info-light) !important; }

.border-standard { border-color: var(--border-color) !important; }
.border-brand { border-color: var(--primary-brand) !important; }
.border-success { border-color: var(--success-color) !important; }
.border-warning { border-color: var(--warning-color) !important; }
.border-info { border-color: var(--info-color) !important; }
.border-on-gray { border-color: var(--border-on-gray) !important; }

/* === COMPONENT PATTERNS === */
.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* === WHITE BACKGROUND TEXT FIXES === */
.on-white-bg,
.bg-tertiary,
[style*="background: var(--bg-tertiary)"],
[style*="background-color: var(--bg-tertiary)"] {
  color: var(--text-primary) !important;
}

.on-white-bg h1, 
.on-white-bg h2, 
.on-white-bg h3, 
.on-white-bg h4,
.bg-tertiary h1,
.bg-tertiary h2,
.bg-tertiary h3,
.bg-tertiary h4 {
  color: var(--text-primary) !important;
}

.on-white-bg p,
.bg-tertiary p {
  color: var(--text-primary) !important;
}

.status-removed { 
  background-color: var(--primary-brand); 
  color: white; 
}
.status-restored { 
  background-color: var(--success-color); 
  color: white; 
}
.status-review { 
  background-color: var(--warning-color); 
  color: white; 
}
.status-legal { 
  background-color: var(--info-color); 
  color: white; 
}

.alert-box {
  padding: 1rem;
  border-radius: 0.5rem;
  border-left: 4px solid;
}
.alert-error { 
  background-color: var(--bg-accent); 
  border-color: var(--error-color); 
  color: var(--text-primary);
}
.alert-success { 
  background-color: var(--success-light); 
  border-color: var(--success-color); 
  color: var(--text-primary);
}
.alert-warning { 
  background-color: var(--warning-light); 
  border-color: var(--warning-color); 
  color: var(--text-primary);
}
.alert-info { 
  background-color: var(--info-light); 
  border-color: var(--info-color); 
  color: var(--text-primary);
}

/* === GRAY BACKGROUND ADAPTATIONS === */
.on-gray-bg {
  color: var(--text-on-gray);
}

.on-gray-bg h1, 
.on-gray-bg h2, 
.on-gray-bg h3, 
.on-gray-bg h4 {
  color: var(--text-on-gray);
}

.on-gray-bg .muted {
  color: var(--text-secondary);
}

.on-gray-bg a {
  color: var(--primary-brand-light);
}

.on-gray-bg a:hover {
  color: var(--primary-brand);
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Ensure minimum contrast ratios for critical elements */
.high-contrast-text {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.high-contrast-button {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #000000 !important;
}

.high-contrast-button:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --text-primary: #000000;
    --text-secondary: #1a1a1a;
    --text-muted: #333333;
    --border-color: #555555;
    --primary-brand: #8b1538;
    --bg-primary: #374151;
    --success-color: #065f46;
    --warning-color: #92400e;
    --info-color: #1e40af;
  }
  
  .status-badge {
    border: 2px solid currentColor;
  }
  
  .btn {
    border: 2px solid currentColor;
  }
}

/* === RESPONSIVE CONSIDERATIONS === */
@media (max-width: 768px) {
  .status-badge {
    font-size: 0.7rem;
    padding: 0.2rem 0.6rem;
  }
  
  .alert-box {
    padding: 0.75rem;
    border-left-width: 3px;
  }
}