/* styles/theme.css
   Platform Default Theme — single consolidated theme.
   Replaces the former 3-generation theme system (Alpha/Z/Millennials).
   Only Light and Dark modes remain, keyed on [data-theme].
   Dark is the default (declared on :root). */

/* themes/generation-alpha/tokens.css
   Generation Alpha — Futuristic · Glassmorphism · Premium */

:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --btn-radius:   8px;
  --card-radius:  20px;
  --node-radius-m:  12px;
  --transition:   0.18s ease;
}

/* Dark mode */
:root,
[data-theme="dark"] {
  --bg:           #090e1a;
  --background: var(--bg);
  --bg-2:         #0d1425;
  --bg-3:         #111827;
  --bg-4:         #1a2236;
  --surface:      #131d30;
  --surface-2:    #1c2840;
  --border:       rgba(99,118,160,0.18);
  --border-2:     rgba(99,118,160,0.28);
  --text:         #e8edf5;
  --text-muted:   #8899bb;
  --text-faint:   #4a5a78;
  --accent:       #4f8ef7;
  --accent-soft:  #3a6abf;
  --accent-glow:  rgba(79,142,247,0.35);
  --accent-hover: #6ba3ff;
  --success:      #34d399;
  --warning:      #fbbf24;
  --danger:       #f87171;
  --shadow:       0 2px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.7);
}

/* Light mode */
[data-theme="light"] {
  --timeline-label-color: rgba(55,80,140,0.70);
  --node-label-color:    rgba(20,40,90,0.92);
  --node-year-color:     rgba(50,70,130,0.78);
  --timeline-line-color:  rgba(80,100,150,0.2);
  --bg:           #f0f4ff;
  --bg-2:         #e8edf8;
  --bg-3:         #ffffff;
  --bg-4:         #dde5f5;
  --surface:      #ffffff;
  --surface-2:    #f5f8ff;
  --border:       rgba(80,100,150,0.15);
  --border-2:     rgba(80,100,150,0.25);
  --text:         #1a2440;
  --text-muted:   #5568a0;
  --text-faint:   #99aad0;
  --accent:       #2563eb;
  --accent-soft:  #3b82f6;
  --accent-glow:  rgba(37,99,235,0.2);
  --accent-hover: #1d4ed8;
  --success:      #059669;
  --warning:      #d97706;
  --danger:       #dc2626;
  --shadow:       0 2px 16px rgba(0,0,0,0.1);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.15);
}

/* ── Animation & Motion tokens ── */
:root {
  --anim-speed:      0.22s;
  --anim-curve:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-curve-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --sidebar-w:       210px;
  --inspector-w:     290px;
  --topbar-h:        52px;

  /* Graph node theme colors (read by graph-engine.js) */
  --node-male-fill:    #1a3460;
  --node-female-fill:  #2a1a50;
  --node-other-fill:   #1a3040;
  --node-deceased-fill:#101520;
  --node-male-stroke:  rgba(99,130,255,0.65);
  --node-female-stroke:rgba(160,100,255,0.65);
  --node-other-stroke: rgba(80,180,160,0.55);
  --node-focus-stroke: #4f8ef7;
  --node-dead-stroke:  rgba(100,116,139,0.4);

  /* Edge colors */
  --edge-marriage:    #6366f1;
  --edge-divorce:     #ef4444;
  --edge-partnership: #8b5cf6;
  --edge-remarriage:  #3b82f6;
  --edge-parentchild: #4a6080;
  --edge-adoption:    #f59e0b;
  --edge-sibling:     #10b981;

  /* Graph background bands */
  --band-even: rgba(30,41,59,0.22);
  --band-odd:  rgba(15,23,42,0.14);
  --timeline-label-color: rgba(148,170,210,0.72);
  --node-label-color:    rgba(220,230,250,0.95);
  --node-year-color:     rgba(170,190,230,0.82);
  --timeline-line-color:  rgba(71,85,105,0.22);
}


/* ═══ Platform component styling (formerly Alpha theme styles) ═══ */
/* ═══════════════════════════════════════════════════════════════════
   GENERATION ALPHA — Futuristic · Immersive · Glassmorphism · Premium
   Cognitive mode: visual-first, animated, premium, dopamine-optimised
   ═══════════════════════════════════════════════════════════════════ */

/* ── Immersive background ──────────────────────────────────────────── */
body {
  background: var(--bg);
}
.home-bg .home-glow {
  display: block;
  background: radial-gradient(ellipse 900px 600px at 50% -10%,
    rgba(79,142,247,0.18) 0%,
    rgba(139,92,246,0.10) 40%,
    transparent 70%);
}
.home-bg .home-grid {
  opacity: 0.45;
  background-image:
    linear-gradient(rgba(79,142,247,0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,142,247,0.08) 1px, transparent 1px);
  background-size: 52px 52px;
  animation: gridDrift 25s linear infinite;
}
@keyframes gridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 52px 52px; }
}

/* ── Glassmorphism topbar ──────────────────────────────────────────── */
.topbar {
  background: rgba(9,14,26,0.78);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-bottom: 1px solid rgba(99,118,160,0.12);
}
[data-theme="light"] .topbar {
  background: rgba(240,244,255,0.82);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(80,100,150,0.1);
}
.home-nav {
  background: transparent;
  border-bottom: none;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero-badge {
  background: linear-gradient(135deg, rgba(79,142,247,0.18), rgba(139,92,246,0.18));
  border: 1px solid rgba(139,92,246,0.3);
  color: #a78bfa;
  animation: badgePulse 4s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(139,92,246,0.3); }
  50%     { box-shadow: 0 0 18px 4px rgba(139,92,246,0.15); }
}
.hero-title {
  background: linear-gradient(135deg, var(--text) 0%, rgba(232,237,245,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}
[data-theme="light"] .hero-title {
  background: linear-gradient(135deg, var(--text) 0%, #5568a0 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.hero-title em {
  background: linear-gradient(135deg, #4f8ef7, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

/* ── Feature cards — glassmorphism ────────────────────────────────── */
.feature-card {
  background: rgba(19,29,48,0.60);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(99,118,160,0.15);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
[data-theme="light"] .feature-card {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(8px);
}
.feature-card:hover {
  border-color: rgba(79,142,247,0.4);
  box-shadow: 0 8px 32px rgba(79,142,247,0.12), inset 0 1px 0 rgba(255,255,255,0.05);
  transform: translateY(-3px);
}
.feature-icon {
  display: inline-block;
  animation: featureFloat 3s ease-in-out infinite;
}
.feature-card:nth-child(2) .feature-icon { animation-delay: 0.5s; }
.feature-card:nth-child(3) .feature-icon { animation-delay: 1s; }
.feature-card:nth-child(4) .feature-icon { animation-delay: 1.5s; }
@keyframes featureFloat {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* ── CTA buttons — gradient glow ──────────────────────────────────── */
.btn-primary-lg {
  background: linear-gradient(135deg, #4f8ef7 0%, #6366f1 100%);
  box-shadow: 0 4px 24px rgba(79,142,247,0.45), 0 1px 0 rgba(255,255,255,0.1) inset;
  border: none;
  position: relative;
  overflow: hidden;
}
.btn-primary-lg::after {
  content: '';
  position: absolute;
  top: -50%; left: -60%;
  width: 60%; height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn-primary-lg:hover::after { left: 120%; }
.btn-primary-lg:hover {
  box-shadow: 0 8px 36px rgba(79,142,247,0.55), 0 1px 0 rgba(255,255,255,0.15) inset;
  transform: translateY(-1px);
}
.btn-secondary-lg {
  background: rgba(19,29,48,0.6);
  border: 1px solid rgba(99,118,160,0.25);
  backdrop-filter: blur(6px);
}
.btn-secondary-lg:hover {
  border-color: rgba(79,142,247,0.4);
  background: rgba(79,142,247,0.08);
}

/* ── Panel cards ──────────────────────────────────────────────────── */
.panel-card {
  background: rgba(19,29,48,0.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(99,118,160,0.15);
  border-radius: var(--card-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
[data-theme="light"] .panel-card {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 40px rgba(0,0,0,0.1);
}

/* ── Modals — glass panels ─────────────────────────────────────────── */
.modal {
  background: rgba(19,29,48,0.88);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(99,118,160,0.15);
  border-radius: var(--card-radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
[data-theme="light"] .modal {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(20px);
}
.modal-overlay.active {
  background: rgba(4,8,20,0.72);
  backdrop-filter: blur(4px);
}

/* ── Topbar + sidebar glass ────────────────────────────────────────── */
.sidebar {
  background: rgba(13,20,37,0.72);
  backdrop-filter: blur(12px);
  border-right: 1px solid rgba(99,118,160,0.1);
}
[data-theme="light"] .sidebar {
  background: rgba(245,248,255,0.85);
  backdrop-filter: blur(12px);
}
.inspector {
  background: rgba(13,20,37,0.82);
  backdrop-filter: blur(12px);
  border-left: 1px solid rgba(99,118,160,0.12);
}
.slide-panel {
  background: rgba(13,20,37,0.92);
  backdrop-filter: blur(16px);
  border-left: 1px solid rgba(99,118,160,0.14);
}

/* ── Graph SVG glow filter ─────────────────────────────────────────── */
.graph-container {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(9,14,26,1) 0%,
    rgba(6,10,20,1) 100%);
}
[data-theme="light"] .graph-container {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(235,240,255,1) 0%,
    rgba(225,232,252,1) 100%);
}

/* ── Node pulse animation (living nodes) ───────────────────────────── */
.node circle:first-of-type {
  animation: nodePulse 4s ease-in-out infinite;
}
@keyframes nodePulse {
  0%,100% { opacity: 0.22; transform: scale(1); }
  50%     { opacity: 0.35; transform: scale(1.08); }
}

/* ── Tree item hover ───────────────────────────────────────────────── */
.tree-item {
  background: rgba(19,29,48,0.5);
  backdrop-filter: blur(4px);
}
.tree-item:hover {
  background: rgba(79,142,247,0.08);
  border-color: rgba(79,142,247,0.35);
  box-shadow: 0 4px 16px rgba(79,142,247,0.1);
}

/* ── Search wrap ───────────────────────────────────────────────────── */
.search-wrap {
  background: rgba(13,20,37,0.6);
  border-color: rgba(99,118,160,0.2);
  backdrop-filter: blur(6px);
}
.search-wrap:focus-within {
  border-color: rgba(79,142,247,0.45);
  box-shadow: 0 0 0 3px rgba(79,142,247,0.1);
}

/* ── Form inputs ───────────────────────────────────────────────────── */
.form-group input,
.form-group select,
.form-group textarea {
  background: rgba(13,20,37,0.55);
  border-color: rgba(99,118,160,0.2);
  backdrop-filter: blur(4px);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: rgba(79,142,247,0.5);
  box-shadow: 0 0 0 3px rgba(79,142,247,0.12);
}

/* ── Bottom nav glass ──────────────────────────────────────────────── */
.bottom-nav {
  background: rgba(9,14,26,0.85);
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(99,118,160,0.12);
}

/* ── Zoom controls ─────────────────────────────────────────────────── */
.zoom-controls {
  background: rgba(19,29,48,0.75);
  backdrop-filter: blur(10px);
  border-color: rgba(99,118,160,0.18);
  border-radius: 10px;
  overflow: hidden;
}

/* ── Transitions — fluid ───────────────────────────────────────────── */
.screen { animation: alphaScreenIn 0.32s var(--anim-curve-out) forwards; }
@keyframes alphaScreenIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.modal.active {
  animation: alphaModalIn 0.22s var(--anim-curve) forwards;
}
@keyframes alphaModalIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0.94); }
  to   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}

/* ── TG Mode purple tint ───────────────────────────────────────────── */
#screen-tg .topbar {
  background: rgba(18,10,40,0.82);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(139,92,246,0.14);
}