/* ═══════════════════════════════════════════════════════════════
   LyDian COSMION — Civilization Observatory Design System
   3-Tier CSS Design Token Architecture:
     Tier 1: Primitive  — Raw color/size/timing values
     Tier 2: Semantic   — Purpose-based tokens (reference primitives)
     Tier 3: Component  — Scoped component tokens
   ═══════════════════════════════════════════════════════════════ */

/* ══ TIER 1: PRIMITIVE TOKENS ══ */
:root {
  /* Gray scale — Pure neutral dark palette */
  --gray-950: #1a1a1a;
  --gray-900: #202020;
  --gray-850: #262626;
  --gray-800: #2c2c2c;
  --gray-750: #303030;
  --gray-700: #3a3a3a;
  --gray-600: #4a4a4a;
  --gray-500: #555555;
  --gray-400: #777777;
  --gray-300: #999999;
  --gray-200: #bbbbbb;
  --gray-100: #e5e5e5;
  --gray-50: #f5f5f5;
  --white: #ffffff;

  /* Engine palette */
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #6366f1;
  --green-400: #2dd4bf;
  --green-300: #5eead4;
  --green-500: #14b8a6;
  --yellow-400: #fbbf24;
  --yellow-500: #f59e0b;
  --red-400: #fb923c;
  --red-500: #f97316;
  --red-300: #fdba74;
  --red-200: #fed7aa;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-300: #38bdf8;
  --cyan-400: #22d3ee;
  --cyan-300: #67e8f9;
  --pink-400: #f472b6;
  --orange-400: #fb923c;
  --indigo-400: #818cf8;
  --violet-400: #c084fc;

  /* LyDian Warm Clay scale (brand palette) */
  --ld-200: #F5A47C;
  --ld-300: #E97451;
  --ld-400: #D4654A;
  --ld-500: #B85440;
  --ld-600: #964535;
  --ld-700: #6B3025;
  --ld-gold-300: #FFD700;
  --ld-gold-400: #D4A853;
  --ld-gold-500: #B8860B;

  /* LyDian Wing Teal (logo kanat renkleri) */
  --ld-teal-400: #2D5F5F;
  --ld-teal-500: #1A4A4A;
  --ld-teal-600: #0F3333;

  /* Slate scale (neutral blue-gray, Tailwind-derived) */
  --slate-200: #e2e8f0;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-700: #334155;
  --slate-800: #1e293b;

  /* Navy scale (deep blue, dashboard/strategic) */
  --navy-800: #2d2d4a;
  --navy-900: #1a1a2e;

  /* Extended status colors */
  --emerald-400: #34d399;
  --emerald-500: #22c55e;
  --cyan-500: #06b6d4;
  --sky-400: #4fc3f7;
  --amber-400: #ffaa00;

  /* Typography primitives */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --size-11: 0.75rem; /* 12px — WCAG mobile floor (was 11px) */
  --size-13: 0.8125rem;
  --size-15: 0.9375rem;
  --size-18: 1.125rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-40: 2.5rem;

  /* Spacing primitives */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Radius primitives */
  --r-6: 6px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-full: 9999px;

  /* Timing primitives */
  --dur-fast: 120ms;
  --dur-normal: 200ms;
  --dur-slow: 350ms;
  --ease-default: ease;
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ══ TIER 2: SEMANTIC TOKENS ══ */
:root {
  /* Backgrounds */
  --bg-primary: var(--gray-950);
  --bg-secondary: var(--gray-900);
  --bg-card: var(--gray-850);
  --bg-card-hover: rgba(47, 47, 45, 0.95);
  --bg-glass: rgba(31, 31, 30, 0.85);
  --bg-input: #2c2c2c;
  --bg-tooltip: var(--gray-700);
  --bg-tertiary: var(--gray-800);
  --bg-header: rgba(26, 26, 25, 0.92);
  --bg-sidebar: rgba(26, 26, 25, 0.88);
  --bg-footer: rgba(26, 26, 25, 0.90);
  --bg-surface: var(--gray-800);
  --glass-hover: rgba(255, 255, 255, 0.03);
  --glass-border: rgba(255, 255, 255, 0.06);
  --scrollbar-thumb: rgba(255, 255, 255, 0.1);

  /* Text */
  --text-primary: var(--gray-100);
  --text-secondary: var(--gray-300);
  --text-muted: #888888; /* WCAG AA 4.5:1 contrast on dark bg — raised from #777 */
  --text-tertiary: var(--gray-500);
  --text-bright: var(--white);

  /* Engine accent colors */
  --color-consciousness: var(--purple-400);
  --color-economics: var(--ld-gold-400);
  --color-culture: var(--yellow-400);
  --color-security: var(--orange-400);
  --color-social: var(--blue-400);
  --color-temporal: var(--cyan-400);
  --color-disaster: #E97451;
  --color-disaster-mesh: #f97316;
  --color-disaster-sos: #E97451;
  --color-disaster-resource: #10b981;
  --color-disaster-earthquake: #f59e0b;
  --color-ethics: var(--pink-400);
  --color-creativity: var(--orange-400);
  --color-governance: var(--purple-400);
  --color-evolution: var(--cyan-300);
  --color-sync: var(--indigo-400);
  --color-defense: var(--red-300);  /* warm orange tone */
  --color-mesh: var(--blue-300);
  --color-law: var(--red-200);
  --color-memory: var(--violet-400);
  --color-llm: var(--cyan-300);

  /* Competitive Intelligence (Gold accent) */
  --color-competitive: #D4A853;
  --color-competitive-hover: #B8860B;
  --color-competitive-muted: rgba(212, 168, 83, 0.1);

  /* Status */
  --color-success: var(--green-500);
  --color-warning: var(--yellow-500);
  --color-danger: #E97451;
  --color-info: var(--blue-500);

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-medium: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(212, 101, 74, 0.3);
  --border-primary: rgba(255, 255, 255, 0.1);
  --border-secondary: rgba(255, 255, 255, 0.05);

  /* Typography (semantic) */
  --font-size-xs: var(--size-11);
  --font-size-sm: var(--size-13);
  --font-size-base: var(--size-15);
  --font-size-lg: var(--size-18);
  --font-size-xl: var(--size-24);
  --font-size-2xl: var(--size-32);
  --font-size-3xl: var(--size-40);

  /* Spacing (semantic) */
  --space-2xs: var(--sp-2);
  --space-xs: var(--sp-4);
  --space-sm: var(--sp-8);
  --space-md: var(--sp-16);
  --space-lg: var(--sp-24);
  --space-xl: var(--sp-32);
  --space-2xl: var(--sp-48);
  --space-3xl: var(--sp-64);

  /* Radius (semantic) */
  --radius-sm: var(--r-6);
  --radius-md: var(--r-12);
  --radius-lg: var(--r-16);
  --radius-xl: var(--r-24);
  --radius-full: var(--r-full);

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3);
  --shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-glow-accent: 0 0 20px rgba(212, 101, 74, 0.15);
  --shadow-glow-blue: 0 0 20px rgba(59, 130, 246, 0.15);
  --shadow-glow-green: 0 0 20px rgba(20, 184, 166, 0.15);
  --neon-glow: 0 0 20px rgba(212, 101, 74, 0.25), 0 0 40px rgba(212, 101, 74, 0.1);
  --neon-glow-sm: 0 0 10px rgba(212, 101, 74, 0.2);
  --neon-border: 0 0 0 1px rgba(212, 101, 74, 0.3);

  /* Transitions */
  --transition-fast: var(--dur-fast) var(--ease-default);
  --transition-normal: var(--dur-normal) var(--ease-default);
  --transition-slow: var(--dur-slow) var(--ease-default);
  --transition: all 0.2s ease;

  /* Z-index scale */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-command-palette: 9999;

  /* Accent */
  --accent-primary: var(--ld-400);
  --accent-secondary: var(--ld-300);
  --accent-tertiary: var(--ld-500);
  --accent-glow: rgba(212, 101, 74, 0.4);
  --accent-gradient: linear-gradient(135deg, var(--ld-400), var(--ld-300));

  /* Status aliases (backward-compat) */
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-danger);
  --info: var(--color-info);

  /* Blur */
  --blur: blur(12px);
}

/* ══ TIER 3: COMPONENT TOKENS ══ */
:root {
  /* Sidebar */
  --sidebar-width: 280px;
  --sidebar-width-expanded: 280px;
  --sidebar-width-collapsed: 64px;
  --sidebar-bg: var(--bg-secondary);
  --sidebar-border: var(--border-subtle);
  --sidebar-transition: var(--dur-normal) var(--ease-out);

  /* Header */
  --header-height: 56px;
  --header-bg: var(--bg-secondary);
  --header-border: var(--border-subtle);

  /* Content */
  --content-max-width: 1440px;
  --footer-height: 32px;

  /* Card component */
  --card-bg: var(--bg-glass);
  --card-bg-rgb: 15, 15, 15;
  --card-border: var(--border-subtle);
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-lg);
  --card-shadow: var(--shadow-card);
  --card-blur: blur(20px) saturate(200%);

  /* Spacing aliases (backward-compat, dashboard.css) */
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
}

/* ── Base Reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body.observatory {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  background: var(--bg-primary);
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(212, 101, 74, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(212, 101, 74, 0.02) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(20, 184, 166, 0.02) 0%, transparent 50%);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   Glass Card System — 3-tier glassmorphism
   ═══════════════════════════════════════════════════════════════ */

/* Base card */
.card {
  background: var(--card-bg);
  backdrop-filter: var(--card-blur);
  -webkit-backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: all 0.35s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  pointer-events: none;
}

.card:hover {
  border-color: rgba(212, 101, 74, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px rgba(212, 101, 74, 0.08);
}

/* Tier 1: Light glass — KPI cards, stat cards */
.card--glass-light {
  background: rgba(var(--card-bg-rgb), 0.3);
  backdrop-filter: blur(8px) saturate(160%);
  -webkit-backdrop-filter: blur(8px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Tier 2: Standard glass — panels, sections */
.card--glass {
  background: rgba(var(--card-bg-rgb), 0.45);
  backdrop-filter: blur(20px) saturate(190%);
  -webkit-backdrop-filter: blur(20px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Tier 3: Heavy glass — hero sections, overlays */
.card--glass-heavy {
  background: rgba(var(--card-bg-rgb), 0.6);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Living card — animated gradient border + glow for engine status */
.card--alive {
  position: relative;
}
.card--alive::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
  background-size: 200% 100%;
  animation: gradient-flow 3s ease infinite;
  pointer-events: none;
}

.card--clickable {
  cursor: pointer;
}

.card--clickable:hover {
  background: var(--bg-card-hover);
}

/* Engine-specific hover glow */
.card--consciousness:hover { box-shadow: 0 0 40px rgba(167,139,250,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(168, 85, 247, 0.2); }
.card--economics:hover { box-shadow: 0 0 40px rgba(45,212,191,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(20, 184, 166, 0.2); }
.card--social:hover { box-shadow: 0 0 40px rgba(96,165,250,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(59, 130, 246, 0.2); }
.card--temporal:hover { box-shadow: 0 0 40px rgba(34,211,238,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(6, 182, 212, 0.2); }
.card--evolution:hover { box-shadow: 0 0 40px rgba(110,231,183,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(110,231,183,0.2); }
.card--security:hover { box-shadow: 0 0 40px rgba(251,146,60,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(233, 116, 81, 0.2); }
.card--culture:hover { box-shadow: 0 0 40px rgba(245,158,11,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(245, 158, 11, 0.2); }
.card--sync:hover { box-shadow: 0 0 40px rgba(129,140,248,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(129,140,248,0.2); }
.card--defense:hover { box-shadow: 0 0 40px rgba(253,186,116,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(253,186,116,0.2); }
.card--mesh:hover { box-shadow: 0 0 40px rgba(56,189,248,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(56,189,248,0.2); }
.card--law:hover { box-shadow: 0 0 40px rgba(254,215,170,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(254,215,170,0.2); }
.card--memory:hover { box-shadow: 0 0 40px rgba(192,132,252,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(192,132,252,0.2); }
.card--llm:hover { box-shadow: 0 0 40px rgba(103,232,249,0.15), 0 8px 32px rgba(0,0,0,0.3); border-color: rgba(103,232,249,0.2); }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-md);
}

.card-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
}

.card-icon {
  width: 20px;
  height: 20px;
  opacity: 0.6;
}

/* ── Stat Values ── */
.stat-value {
  font-family: var(--font-mono);
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1.1;
}

.stat-value--sm {
  font-size: var(--font-size-lg);
}

.stat-label {
  font-size: var(--font-size-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-top: var(--space-xs);
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.stat-trend--up { color: var(--color-success); }
.stat-trend--down { color: var(--color-danger); }
.stat-trend--flat { color: var(--text-muted); }

/* ── Badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
}

.badge--consciousness { background: rgba(168, 85, 247, 0.15); color: var(--color-consciousness); }
.badge--economics { background: rgba(212, 168, 83, 0.15); color: var(--color-economics); }
.badge--culture { background: rgba(245, 158, 11, 0.15); color: var(--color-culture); }
.badge--security { background: rgba(233, 116, 81, 0.15); color: var(--color-security); }
.badge--social { background: rgba(59, 130, 246, 0.15); color: var(--color-social); }
.badge--temporal { background: rgba(6, 182, 212, 0.15); color: var(--color-temporal); }
.badge--ethics { background: rgba(236, 72, 153, 0.15); color: var(--color-ethics); }
.badge--success { background: rgba(20, 184, 166, 0.15); color: var(--color-success); }
.badge--warning { background: rgba(245, 158, 11, 0.15); color: var(--color-warning); }
.badge--danger { background: rgba(233, 116, 81, 0.15); color: var(--color-danger); }
.badge--info { background: rgba(59, 130, 246, 0.15); color: var(--color-info); }
.badge--sync { background: rgba(129,140,248,0.15); color: var(--color-sync); }
.badge--defense { background: rgba(253,186,116,0.15); color: var(--color-defense); }
.badge--mesh { background: rgba(56,189,248,0.15); color: var(--color-mesh); }
.badge--law { background: rgba(254,215,170,0.15); color: var(--color-law); }
.badge--memory { background: rgba(192,132,252,0.15); color: var(--color-memory); }
.badge--llm { background: rgba(103,232,249,0.15); color: var(--color-llm); }

/* ── Pulse Indicator ── */
.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  position: relative;
}

.pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  animation: pulse-ring 1.6s ease-out infinite;
}

.pulse-dot--active {
  background: var(--color-success);
  animation: breathe 1.6s ease-in-out infinite;
}

.pulse-dot--active::after {
  border: 2px solid var(--color-success);
}

.pulse-dot--warning {
  background: var(--color-warning);
}

.pulse-dot--warning::after {
  border: 2px solid var(--color-warning);
}

.pulse-dot--danger {
  background: var(--color-danger);
}

.pulse-dot--danger::after {
  border: 2px solid var(--color-danger);
}

/* ── Glass Panel ── */
.glass-panel {
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

/* ── Grid Helpers ── */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-md);
}

/* Bento grid — responsive KPI layout with container queries */
.grid-bento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
}

.grid-bento > .card--span-2 {
  grid-column: span 2;
}

@container (min-width: 600px) {
  .grid-bento > .card--span-2 {
    grid-column: span 2;
  }
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Utility Classes ── */
.text-mono { font-family: var(--font-mono); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-bright { color: var(--text-bright); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-md { margin-bottom: var(--space-md); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* ── Progress Bar ── */
.progress-bar {
  height: 4px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  border-radius: 2px;
  transition: width var(--transition-normal);
}

/* ── Gauge (circular) ── */
.gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.gauge__value {
  position: absolute;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--font-size-sm);
}

/* ── Activity Feed ── */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-height: 400px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast);
}

.activity-item:hover {
  background: rgba(255, 255, 255, 0.03);
}

.activity-item__time {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  white-space: nowrap;
  min-width: 52px;
}

.activity-item__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 7px;
  flex-shrink: 0;
}

.activity-item__text {
  color: var(--text-secondary);
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive Breakpoints
   >=1440: Full layout, sidebar expanded
   1024-1439: Sidebar collapsed by default, 2-column grids
   768-1023: Sidebar overlay, single-column grids
   <768: Mobile stacked
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1439px) and (min-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-bento { grid-template-columns: 1fr; }
  .grid-bento > .card--span-2 { grid-column: span 1; }
  :root {
    --sidebar-width: 0px;
    --header-height: 48px;
  }
}

/* ══ CONTAINER QUERIES — Sidebar-Aware Responsiveness ══════════════════════
   Respond to actual content width (not viewport), so grids adapt when
   sidebar opens (280px) or collapses (64px) without viewport change.
   ═══════════════════════════════════════════════════════════════════════════ */
@container content (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@container content (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
}

@container content (max-width: 600px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-bento, .bento-grid { grid-template-columns: 1fr; }
  .grid-bento > .card--span-2 { grid-column: span 1; }
  .bento-grid .bento-wide { grid-column: span 1; }
  .grid-auto { grid-template-columns: 1fr; }
}

/* ── Skeleton Loading ── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg-card) 25%,
    var(--bg-card-hover) 50%,
    var(--bg-card) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

/* ── Tooltip ── */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tooltip);
  color: var(--text-primary);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: var(--z-toast);
}

[data-tooltip]:hover::after {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
   Light Theme — remaps semantic tokens
   ═══════════════════════════════════════════════════════════════ */
[data-theme="light"] {
  /* Backgrounds — warm neutral */
  --bg-primary: #f7f8fa;
  --bg-secondary: var(--white);
  --bg-tertiary: #f0f1f3;
  --bg-card: var(--white);
  --bg-card-hover: rgba(240, 241, 245, 0.95);
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-surface: #eef0f2;
  --bg-input: #f3f4f6;
  --bg-tooltip: #2a2a2e;
  --bg-header: rgba(255, 255, 255, 0.94);
  --bg-sidebar: rgba(250, 250, 252, 0.97);
  --bg-footer: rgba(255, 255, 255, 0.94);
  --header-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
  --bg-modal: rgba(255, 255, 255, 0.98);
  --bg-overlay: rgba(0, 0, 0, 0.25);
  --bg-code: #f3f4f6;

  /* Card system */
  --card-bg: rgba(255, 255, 255, 0.92);
  --card-bg-rgb: 255, 255, 255;
  --card-border: rgba(0, 0, 0, 0.07);

  /* Accent — warm clay for readable contrast on white */
  --accent-primary: #C45A3A;
  --accent-secondary: #D4654A;
  --accent-tertiary: #964535;
  --accent-gradient: linear-gradient(135deg, #C45A3A, #D4654A);
  --accent-glow: rgba(196, 90, 58, 0.10);
  --accent-glow-strong: rgba(196, 90, 58, 0.18);

  /* Domain colors — muted for light backgrounds */
  --color-economics: #0e7490;
  --color-culture: #b8800a;
  --color-security: #c2650c;
  --color-social: #2e6bc4;
  --color-success: #0e7490;
  --color-warning: #b8800a;
  --color-danger: #c2650c;

  /* Text — comfortable contrast, not too harsh */
  --text-primary: #1c1e21;
  --text-secondary: #52555a;
  --text-muted: #838690;
  --text-bright: #0c0d0e;
  --text-tertiary: #9a9da3;
  --text-on-dark: #ffffff;
  --text-link: #C45A3A;

  /* Borders */
  --border-subtle: rgba(0, 0, 0, 0.06);
  --border-medium: rgba(0, 0, 0, 0.1);
  --border-strong: rgba(0, 0, 0, 0.14);
  --border-color: #dfe1e5;
  --border-accent: rgba(196, 90, 58, 0.16);

  /* Shadows — subtle, layered */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.07), 0 8px 32px rgba(0, 0, 0, 0.05);
  --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.1);

  /* Scrollbar */
  --scrollbar-thumb: rgba(0, 0, 0, 0.14);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);
  --scrollbar-track: rgba(0, 0, 0, 0.03);

  /* Skeleton / Shimmer */
  --skeleton-base: rgba(0, 0, 0, 0.05);
  --skeleton-shimmer: rgba(0, 0, 0, 0.08);

  /* Component-specific */
  --glass-hover: rgba(0, 0, 0, 0.025);
  --glass-border: rgba(0, 0, 0, 0.06);

  /* color- aliases for component overrides */
  --color-bg-primary: #f7f8fa;
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: #f0f2f5;
  --color-surface-1: #ffffff;
  --color-surface-2: #f0f2f5;
  --color-text-primary: #0f1117;
  --color-text-secondary: rgba(15,17,23,.65);
  --color-text-tertiary: rgba(15,17,23,.45);
  --color-border-1: rgba(0,0,0,.08);
  --color-border-2: rgba(0,0,0,.05);
  --color-shadow-1: rgba(0,0,0,.08);
}

@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg-primary: #f7f8fa;
    --bg-secondary: var(--white);
    --bg-tertiary: #f0f1f3;
    --bg-card: var(--white);
    --bg-card-hover: rgba(240, 241, 245, 0.95);
    --bg-glass: rgba(255, 255, 255, 0.85);
    --bg-surface: #eef0f2;
    --bg-input: #f3f4f6;
    --bg-tooltip: #2a2a2e;
    --bg-header: rgba(255, 255, 255, 0.94);
    --bg-sidebar: rgba(250, 250, 252, 0.97);
    --bg-footer: rgba(255, 255, 255, 0.94);
    --header-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
    --bg-modal: rgba(255, 255, 255, 0.98);
    --bg-overlay: rgba(0, 0, 0, 0.25);
    --bg-code: #f3f4f6;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-bg-rgb: 255, 255, 255;
    --card-border: rgba(0, 0, 0, 0.07);
    --accent-primary: #C45A3A;
    --accent-secondary: #D4654A;
    --accent-tertiary: #8B1A2B;
    --accent-gradient: linear-gradient(135deg, #C45A3A, #D4654A);
    --accent-glow: rgba(196, 90, 58, 0.10);
    --accent-glow-strong: rgba(196, 90, 58, 0.18);
    --color-economics: #b8860b;
    --color-culture: #b8800a;
    --color-security: #c2650c;
    --color-social: #2e6bc4;
    --color-success: #0e7490;
    --color-warning: #b8800a;
    --color-danger: #c2650c;
    --text-primary: #1c1e21;
    --text-secondary: #52555a;
    --text-muted: #838690;
    --text-bright: #0c0d0e;
    --text-tertiary: #9a9da3;
    --text-on-dark: #ffffff;
    --text-link: #C45A3A;
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.1);
    --border-strong: rgba(0, 0, 0, 0.14);
    --border-color: #dfe1e5;
    --border-accent: rgba(196, 90, 58, 0.16);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 10px rgba(0, 0, 0, 0.05);
    --shadow-elevated: 0 4px 16px rgba(0, 0, 0, 0.07), 0 8px 32px rgba(0, 0, 0, 0.05);
    --shadow-dropdown: 0 4px 20px rgba(0, 0, 0, 0.1);
    --scrollbar-thumb: rgba(0, 0, 0, 0.14);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.22);
    --scrollbar-track: rgba(0, 0, 0, 0.03);
    --skeleton-base: rgba(0, 0, 0, 0.05);
    --skeleton-shimmer: rgba(0, 0, 0, 0.08);
    --glass-hover: rgba(0, 0, 0, 0.025);
    --glass-border: rgba(0, 0, 0, 0.06);
  }
}

/* ── Toast Notifications ── */
#toast-container { pointer-events: none; }
#toast-container > div { pointer-events: auto; }

/* ═══════════════════════════════════════════════════════════════
   Living Animations — "Living Intelligence" Motion System
   (durations ~20% snappier than v1)
   ═══════════════════════════════════════════════════════════════ */

/* Breathing glow for active elements */
@keyframes breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Subtle floating for overview cards */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Data pulse ring (for status indicators) */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* Gradient flow for header/sidebar borders */
@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Shimmer effect for loading states */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Skeleton shimmer */
@keyframes skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Page entry */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Page exit */
@keyframes fadeOutDown {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(8px); }
}

/* Living border — subtle animated gradient border */
.living-border {
  position: relative;
}
.living-border::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-primary), var(--accent-secondary), transparent);
  background-size: 200% 100%;
  animation: gradient-flow 3s ease infinite;
  pointer-events: none;
}

/* Shimmer loading placeholder */
.shimmer {
  background: linear-gradient(90deg, var(--bg-card) 25%, rgba(255,255,255,0.05) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s ease-in-out infinite;
}

/* Page content entry animation */
.content > * {
  animation: fadeInUp 0.25s var(--ease-out);
}

/* View transition classes */
.view-enter {
  animation: fadeInUp 0.2s var(--ease-out) forwards;
}

.view-exit {
  animation: fadeOutDown 0.15s var(--ease-out) forwards;
}

/* ── LyDian Logo Animations ── */
@keyframes ld-breathe {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(212, 101, 74, 0.2)); }
  50% { filter: drop-shadow(0 0 10px rgba(212, 101, 74, 0.45)); }
}

@keyframes ld-node-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes ld-circuit-flow {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

.logo .ld-logo-svg {
  transition: filter 0.3s ease;
}

.logo:hover .ld-logo-svg {
  animation: ld-breathe 2s ease-in-out infinite;
}

.ld-circuits {
  stroke-dasharray: 4 2;
  animation: ld-circuit-flow 3s linear infinite;
}

.ld-node {
  animation: ld-node-pulse 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════════
   Mobile Font Floor + Safe Area — WCAG 2.1 Mobile Compliance
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    --size-11: 0.8125rem; /* 13px on mobile (was 12px desktop) */
    --size-13: 0.875rem;  /* 14px on mobile (was 13px desktop) */
  }

  /* Enforce minimum touch target */
  button, [role="button"], a, select, input, textarea {
    min-height: 44px;
  }

  /* Safe area insets for notch/gesture bar */
  body.observatory {
    padding-top: env(safe-area-inset-top, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Grid collapse at small widths */
  .grid-auto {
    grid-template-columns: 1fr;
  }

  /* Sidebar overlay on mobile */
  .sidebar {
    width: min(85vw, 320px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   Reduced Motion — respects user preference
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover {
    transform: none;
  }

  .content > * {
    animation: none;
  }

  .view-enter, .view-exit {
    animation: none;
  }

  .pulse-dot--active {
    animation: none;
  }
}