/* Zeph Tech Pillar Icon System v1.0.0 */

/* =====================================================
   CSS Custom Properties for Pillar Colors
   These values are aligned with the main style.css
   ===================================================== */
:root {
  /* AI - Electric blue */
  --pillar-ai-primary: #38bdf8;
  --pillar-ai-secondary: #7dd3fc;
  --pillar-ai-light: rgba(56, 189, 248, 0.15);
  --pillar-ai-accent: rgba(56, 189, 248, 0.25);

  /* Cybersecurity - Orange */
  --pillar-cybersecurity-primary: #f97316;
  --pillar-cybersecurity-secondary: #fb923c;
  --pillar-cybersecurity-light: rgba(249, 115, 22, 0.15);
  --pillar-cybersecurity-accent: rgba(249, 115, 22, 0.25);

  /* Infrastructure - Green/Teal */
  --pillar-infrastructure-primary: #22f2a3;
  --pillar-infrastructure-secondary: #4ade80;
  --pillar-infrastructure-light: rgba(34, 242, 163, 0.15);
  --pillar-infrastructure-accent: rgba(34, 242, 163, 0.25);

  /* Developer - Teal */
  --pillar-developer-primary: #2dd4bf;
  --pillar-developer-secondary: #5eead4;
  --pillar-developer-light: rgba(45, 212, 191, 0.15);
  --pillar-developer-accent: rgba(45, 212, 191, 0.25);

  /* Data Strategy - Purple */
  --pillar-data-strategy-primary: #a78bfa;
  --pillar-data-strategy-secondary: #c4b5fd;
  --pillar-data-strategy-light: rgba(167, 139, 250, 0.15);
  --pillar-data-strategy-accent: rgba(167, 139, 250, 0.25);

  /* Governance - Amber/Gold */
  --pillar-governance-primary: #fbbf24;
  --pillar-governance-secondary: #fcd34d;
  --pillar-governance-light: rgba(251, 191, 36, 0.15);
  --pillar-governance-accent: rgba(251, 191, 36, 0.25);

  /* Compliance - Pink/Rose */
  --pillar-compliance-primary: #fb7185;
  --pillar-compliance-secondary: #fda4af;
  --pillar-compliance-light: rgba(251, 113, 133, 0.15);
  --pillar-compliance-accent: rgba(251, 113, 133, 0.25);

  /* Policy - Violet */
  --pillar-policy-primary: #c084fc;
  --pillar-policy-secondary: #d8b4fe;
  --pillar-policy-light: rgba(192, 132, 252, 0.15);
  --pillar-policy-accent: rgba(192, 132, 252, 0.25);
}

/* =====================================================
   Icon Container Classes
   ===================================================== */
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.pillar-icon img,
.pillar-icon svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon Sizes */
.pillar-icon--xs { width: 16px; height: 16px; }
.pillar-icon--sm { width: 24px; height: 24px; }
.pillar-icon--md { width: 48px; height: 48px; }
.pillar-icon--lg { width: 96px; height: 96px; }
.pillar-icon--xl { width: 128px; height: 128px; }
.pillar-icon--2xl { width: 256px; height: 256px; }

/* =====================================================
   Badge Classes
   ===================================================== */
.pillar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  border-radius: 9999px;
  text-transform: uppercase;
  transition: all 0.2s ease;
}

.pillar-badge--with-icon {
  padding-left: 0.5rem;
}

.pillar-badge--with-icon .pillar-icon {
  width: 14px;
  height: 14px;
}

/* Solid Badge Variants */
.pillar-badge--solid.pillar-badge--ai {
  background: var(--pillar-ai-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--cybersecurity {
  background: var(--pillar-cybersecurity-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--infrastructure {
  background: var(--pillar-infrastructure-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--developer {
  background: var(--pillar-developer-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--data-strategy {
  background: var(--pillar-data-strategy-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--governance {
  background: var(--pillar-governance-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--compliance {
  background: var(--pillar-compliance-primary);
  color: #0c1219;
}

.pillar-badge--solid.pillar-badge--policy {
  background: var(--pillar-policy-primary);
  color: #0c1219;
}

/* Outlined Badge Variants */
.pillar-badge--outlined {
  background: transparent;
  border: 1px solid currentColor;
}

.pillar-badge--outlined.pillar-badge--ai {
  color: var(--pillar-ai-primary);
  border-color: var(--pillar-ai-primary);
}

.pillar-badge--outlined.pillar-badge--cybersecurity {
  color: var(--pillar-cybersecurity-primary);
  border-color: var(--pillar-cybersecurity-primary);
}

.pillar-badge--outlined.pillar-badge--infrastructure {
  color: var(--pillar-infrastructure-primary);
  border-color: var(--pillar-infrastructure-primary);
}

.pillar-badge--outlined.pillar-badge--developer {
  color: var(--pillar-developer-primary);
  border-color: var(--pillar-developer-primary);
}

.pillar-badge--outlined.pillar-badge--data-strategy {
  color: var(--pillar-data-strategy-primary);
  border-color: var(--pillar-data-strategy-primary);
}

.pillar-badge--outlined.pillar-badge--governance {
  color: var(--pillar-governance-primary);
  border-color: var(--pillar-governance-primary);
}

.pillar-badge--outlined.pillar-badge--compliance {
  color: var(--pillar-compliance-primary);
  border-color: var(--pillar-compliance-primary);
}

.pillar-badge--outlined.pillar-badge--policy {
  color: var(--pillar-policy-primary);
  border-color: var(--pillar-policy-primary);
}

/* Subtle Badge Variants */
.pillar-badge--subtle.pillar-badge--ai {
  background: var(--pillar-ai-light);
  color: var(--pillar-ai-primary);
}

.pillar-badge--subtle.pillar-badge--cybersecurity {
  background: var(--pillar-cybersecurity-light);
  color: var(--pillar-cybersecurity-primary);
}

.pillar-badge--subtle.pillar-badge--infrastructure {
  background: var(--pillar-infrastructure-light);
  color: var(--pillar-infrastructure-primary);
}

.pillar-badge--subtle.pillar-badge--developer {
  background: var(--pillar-developer-light);
  color: var(--pillar-developer-primary);
}

.pillar-badge--subtle.pillar-badge--data-strategy {
  background: var(--pillar-data-strategy-light);
  color: var(--pillar-data-strategy-primary);
}

.pillar-badge--subtle.pillar-badge--governance {
  background: var(--pillar-governance-light);
  color: var(--pillar-governance-primary);
}

.pillar-badge--subtle.pillar-badge--compliance {
  background: var(--pillar-compliance-light);
  color: var(--pillar-compliance-primary);
}

.pillar-badge--subtle.pillar-badge--policy {
  background: var(--pillar-policy-light);
  color: var(--pillar-policy-primary);
}

/* =====================================================
   Icon Background Containers
   ===================================================== */
.pillar-icon-bg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
}

.pillar-icon-bg--ai {
  background: var(--pillar-ai-light);
}

.pillar-icon-bg--cybersecurity {
  background: var(--pillar-cybersecurity-light);
}

.pillar-icon-bg--infrastructure {
  background: var(--pillar-infrastructure-light);
}

.pillar-icon-bg--developer {
  background: var(--pillar-developer-light);
}

.pillar-icon-bg--data-strategy {
  background: var(--pillar-data-strategy-light);
}

.pillar-icon-bg--governance {
  background: var(--pillar-governance-light);
}

.pillar-icon-bg--compliance {
  background: var(--pillar-compliance-light);
}

.pillar-icon-bg--policy {
  background: var(--pillar-policy-light);
}

/* =====================================================
   Hero Icon Classes
   ===================================================== */
.pillar-hero-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.pillar-hero-icon::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(30px);
  animation: pillar-hero-pulse 3s ease-in-out infinite;
}

.pillar-hero-icon--ai::before {
  background: radial-gradient(circle, var(--pillar-ai-primary), var(--pillar-ai-secondary));
}

.pillar-hero-icon--cybersecurity::before {
  background: radial-gradient(circle, var(--pillar-cybersecurity-primary), var(--pillar-cybersecurity-secondary));
}

.pillar-hero-icon--infrastructure::before {
  background: radial-gradient(circle, var(--pillar-infrastructure-primary), var(--pillar-infrastructure-secondary));
}

.pillar-hero-icon--developer::before {
  background: radial-gradient(circle, var(--pillar-developer-primary), var(--pillar-developer-secondary));
}

.pillar-hero-icon--data-strategy::before {
  background: radial-gradient(circle, var(--pillar-data-strategy-primary), var(--pillar-data-strategy-secondary));
}

.pillar-hero-icon--governance::before {
  background: radial-gradient(circle, var(--pillar-governance-primary), var(--pillar-governance-secondary));
}

.pillar-hero-icon--compliance::before {
  background: radial-gradient(circle, var(--pillar-compliance-primary), var(--pillar-compliance-secondary));
}

.pillar-hero-icon--policy::before {
  background: radial-gradient(circle, var(--pillar-policy-primary), var(--pillar-policy-secondary));
}

@keyframes pillar-hero-pulse {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.05);
  }
}

/* =====================================================
   Accessibility: Reduced Motion
   ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .pillar-badge,
  .pillar-hero-icon::before {
    animation: none;
    transition: none;
  }
}

/* =====================================================
   Accessibility: High Contrast Mode
   ===================================================== */
@media (prefers-contrast: high) {
  .pillar-badge--outlined,
  .pillar-badge--subtle {
    border-width: 2px;
  }
}