/**
 * Aether Ecosystem Universal Glassmorphism Theme Engine (Initiative 42)
 * Shared CSS design system tokens and glassmorphic styles for all ecosystem web portals.
 * Usage: <link rel="stylesheet" href="https://cdn.itnik.de/styles/aether-theme.css" />
 */

:root {
  --aether-bg-base: #020617;
  --aether-bg-surface: rgba(15, 23, 42, 0.75);
  --aether-bg-glass: rgba(30, 41, 59, 0.5);
  --aether-border-glass: rgba(255, 255, 255, 0.1);
  --aether-accent-cyan: #38bdf8;
  --aether-accent-purple: #c084fc;
  --aether-text-main: #f8fafc;
  --aether-text-muted: #94a3b8;
  --aether-radius-lg: 16px;
  --aether-radius-md: 12px;
  --aether-blur: 16px;
}

body {
  background-color: var(--aether-bg-base);
  color: var(--aether-text-main);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0;
  padding: 0;
}

.aether-glass-card {
  background: var(--aether-bg-surface);
  backdrop-filter: blur(var(--aether-blur));
  -webkit-backdrop-filter: blur(var(--aether-blur));
  border: 1px solid var(--aether-border-glass);
  border-radius: var(--aether-radius-md);
  padding: 1.5rem;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}

/* Swiss Editorial Print & Justified Typography Standards */
.text-justified,
.prose-justified,
.diagnostic-text,
.wiki-content,
.assessment-summary,
.journal-entry,
.biography-text {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  word-break: normal;
  text-rendering: optimizeLegibility;
}

.text-pretty {
  text-wrap: pretty;
}

.heading-balanced {
  text-wrap: balance;
}

/* Unboxed Value Triad Micro-Icon Badges */
.unboxed-triad-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.triad-icon-badge {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Live Status Pulse Dot */
.status-pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  position: relative;
  display: inline-block;
}

.status-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 9999px;
  animation: aether-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
  opacity: 0.75;
}

@keyframes aether-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}