/* ===============================================
   DEATHLAB THEME - CLINICAL FUTURISM REBRAND
   =============================================== */

/* CSS Custom Properties for DeathLAB Brand - CYAN REBRAND */
:root {
  /* DeathLAB Color System - Updated to Cyan */
  --death-black: #0B0B0B;
  --death-black-secondary: #2B2B2B;
  --death-black-tertiary: #0E2E36;
  --death-red: #6FE4FF; /* Remapped to cyan */
  --death-red-hover: #BFEFFC; /* Remapped to light cyan */
  --death-chrome: #B5C2CA;
  --death-chrome-light: #FFFFFF;
  --death-text: #FFFFFF;
  --death-text-secondary: #B5C2CA;
  --death-text-muted: #3C5058;
  --death-border: rgba(191,239,252,0.12);
  --death-border-subtle: rgba(191,239,252,0.06);

  /* Override Ghost theme variables */
  --color-background: var(--death-black);
  --color-background-tone: var(--death-black-secondary);
  --color-background-reverse: var(--death-chrome-light);
  --color-typography: var(--death-text);
  --color-typography-tone: var(--death-text-secondary);
  --color-typography-content: var(--death-text);
  --color-typography-reverse: var(--death-black);
  --color-border: var(--death-border);
  --ghost-accent-color: #6FE4FF;

  /* Typography - Space Grotesk & Inter */
  --font-headings: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Layout improvements */
  --radius: 2px;
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

/* Global Base Styles Override */
html,
body {
  background: var(--death-black) !important;
  color: var(--death-text) !important;
  font-family: var(--font-body) !important;
  letter-spacing: 0.01em;
}

/* Remove any colorful backgrounds */
.site-wrapper,
.site-main,
main,
.content {
  background: var(--death-black) !important;
  background-image: none !important;
}

/* Typography System */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-headings) !important;
  color: var(--death-text) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
}

h1, .h1 { font-size: 3.5rem; }
h2, .h2 { font-size: 2.5rem; }
h3, .h3 { font-size: 1.875rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.25rem; }
h6, .h6 { font-size: 1.125rem; }

p, .text-content {
  color: var(--death-text-secondary) !important;
  font-weight: 400;
  line-height: 1.6;
}

/* Link System */
a {
  color: var(--death-chrome) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  border-bottom: 1px solid transparent !important;
}

a:hover {
  color: var(--death-red) !important;
  border-bottom-color: var(--death-red) !important;
}

/* Button System */
.btn,
button,
.button,
.cta-button,
.quiz-start-button,
.protocol-btn,
.results-button {
  background: var(--death-black-secondary) !important;
  border: 1px solid var(--death-chrome) !important;
  color: var(--death-chrome) !important;
  padding: 12px 24px !important;
  font-family: var(--font-headings) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  border-radius: var(--radius) !important;
  box-shadow: inset 0 0 0 1px rgba(189,189,189,0.3), 0 2px 8px rgba(0,0,0,0.5) !important;
}

.btn:hover,
button:hover,
.button:hover,
.cta-button:hover,
.quiz-start-button:hover,
.protocol-btn:hover,
.results-button:hover {
  background: var(--death-black) !important;
  border-color: var(--death-red) !important;
  color: var(--death-red) !important;
  box-shadow: inset 0 0 0 1px rgba(216,35,42,0.5), 0 4px 16px rgba(216,35,42,0.2) !important;
  transform: translateY(-1px) !important;
}

/* Primary Button Variant */
.btn-primary,
.results-button.primary {
  background: var(--death-red) !important;
  border-color: var(--death-red) !important;
  color: var(--death-black) !important;
}

.btn-primary:hover,
.results-button.primary:hover {
  background: var(--death-red-hover) !important;
  color: var(--death-black) !important;
  box-shadow: 0 0 20px rgba(216,35,42,0.3) !important;
}

/* Card System */
.card,
.post-card,
.featured-card,
.vendors-card,
.quiz-card,
.stat-card,
.intro-card {
  background: var(--death-black-secondary) !important;
  border: 1px solid var(--death-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 32px rgba(0,0,0,0.8) !important;
  transition: all 0.3s ease !important;
}

.card:hover,
.post-card:hover,
.featured-card:hover {
  border-color: var(--death-chrome) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2), 0 12px 48px rgba(0,0,0,0.9) !important;
  transform: translateY(-2px) !important;
}

/* Section Dividers */
.section-divider,
hr,
.separator {
  border: none !important;
  height: 1px !important;
  background: var(--death-border) !important;
  margin: 3rem 0 !important;
}

/* Header/Navigation */
.site-header,
.header,
.nav {
  background: var(--death-black) !important;
  border-bottom: 1px solid var(--death-border) !important;
}

.site-nav a,
.nav-link {
  color: var(--death-chrome) !important;
  font-family: var(--font-headings) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.site-nav a:hover,
.nav-link:hover {
  color: var(--death-red) !important;
}

/* Footer */
.site-footer,
.footer {
  background: var(--death-black) !important;
  border-top: 1px solid var(--death-border) !important;
  color: var(--death-text-muted) !important;
}

/* Form Inputs */
input,
textarea,
select {
  background: var(--death-black-secondary) !important;
  border: 1px solid var(--death-border) !important;
  color: var(--death-text) !important;
  padding: 12px 16px !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-body) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--death-red) !important;
  box-shadow: 0 0 0 2px rgba(216,35,42,0.2) !important;
  outline: none !important;
}

/* Meta Information */
.meta,
.post-meta,
.category,
.date,
.tag {
  color: var(--death-text-muted) !important;
  font-family: var(--font-body) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Progress Bars */
.progress-bar {
  background: var(--death-black-tertiary) !important;
  border: 1px solid var(--death-border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
}

.progress-fill {
  background: linear-gradient(90deg, var(--death-red), var(--death-red-hover)) !important;
  height: 100% !important;
  transition: width 0.3s ease !important;
}

/* Animations */
@keyframes deathPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

@keyframes deathGlow {
  0%, 100% { box-shadow: 0 0 5px rgba(216,35,42,0.3); }
  50% { box-shadow: 0 0 20px rgba(216,35,42,0.6), 0 0 30px rgba(216,35,42,0.3); }
}

@keyframes scanline {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* DeathLAB Accent Elements */
.death-accent {
  position: relative;
  overflow: hidden;
}

.death-accent::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--death-red), transparent);
  animation: scanline 3s linear infinite;
}

.death-pulse {
  animation: deathPulse 2s ease-in-out infinite;
}

.death-glow {
  animation: deathGlow 3s ease-in-out infinite;
}

/* Utility Classes */
.text-death { color: var(--death-text) !important; }
.text-death-secondary { color: var(--death-text-secondary) !important; }
.text-death-muted { color: var(--death-text-muted) !important; }
.text-death-red { color: var(--death-red) !important; }
.text-death-chrome { color: var(--death-chrome) !important; }

.bg-death { background: var(--death-black) !important; }
.bg-death-secondary { background: var(--death-black-secondary) !important; }
.bg-death-tertiary { background: var(--death-black-tertiary) !important; }

.border-death { border-color: var(--death-border) !important; }
.border-death-chrome { border-color: var(--death-chrome) !important; }
.border-death-red { border-color: var(--death-red) !important; }

/* Clinical Typography Utilities */
.clinical-caps {
  font-family: var(--font-headings) !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--death-text-muted) !important;
}

.sterile-text {
  font-family: 'JetBrains Mono', 'Courier New', monospace !important;
  font-size: 0.875rem !important;
  color: var(--death-chrome) !important;
  letter-spacing: 0.05em !important;
}

/* DeathLAB Logo/Brand Text Treatment */
.deathlab-brand {
  font-family: var(--font-headings) !important;
  font-weight: 700 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.1em !important;
  color: var(--death-text) !important;
  text-transform: uppercase !important;
}

.deathlab-brand .death {
  color: var(--death-red) !important;
}

.deathlab-brand .lab {
  color: var(--death-chrome) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  h1, .h1 { font-size: 2.5rem; }
  h2, .h2 { font-size: 2rem; }
  h3, .h3 { font-size: 1.5rem; }

  .btn,
  button,
  .button {
    padding: 10px 20px !important;
    font-size: 0.8rem !important;
  }
}

/* Print Styles */
@media print {
  * {
    background: white !important;
    color: black !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --death-text: #FFFFFF;
    --death-border: rgba(255,255,255,0.3);
  }
}

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