/* styles/base.css — Reset, root variables, shared base */

*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 15px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
input,select,textarea,button { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }
a { color: var(--accent); text-decoration: none; }

/* Default (alpha dark) — fallback if no theme is set */
:root {
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'DM Mono', monospace;
  --bg:           #090e1a;
  --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;
  --radius:       10px;
  --radius-lg:    16px;
  --radius-xl:    20px;
  --btn-radius:   8px;
  --card-radius:  20px;
  --shadow:       0 2px 16px rgba(0,0,0,0.5);
  --shadow-lg:    0 8px 40px rgba(0,0,0,0.7);
  --transition:   0.18s ease;
  --topbar-h:     52px;
  --sidebar-w:    200px;
  --inspector-w:  280px;
  --bottom-nav-h: 60px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }

/* Keyframes */
@keyframes fadeIn     { from { opacity:0; } to { opacity:1; } }
@keyframes slideRight { from { transform:translateX(20px);opacity:0; } to { transform:translateX(0);opacity:1; } }
@keyframes toastIn    { from { transform:translateY(8px);opacity:0; } to { transform:translateY(0);opacity:1; } }
@keyframes toastOut   { from { transform:translateY(0);opacity:1; } to { transform:translateY(8px);opacity:0; } }
@keyframes editGlow   { 0%,100% { box-shadow:0 0 0 2px rgba(79,142,247,0.1); } 50% { box-shadow:0 0 0 4px rgba(79,142,247,0.2); } }
@keyframes tgGlow     { 0%,100% { box-shadow:0 0 0 2px rgba(139,92,246,0.1); } 50% { box-shadow:0 0 0 4px rgba(139,92,246,0.2); } }
@keyframes pulseDot   { 0%,100% { opacity:1;transform:scale(1); } 50% { opacity:.4;transform:scale(.7); } }
@keyframes syncPulse  { 0%,100% { opacity:1;transform:scale(1); } 50% { opacity:.5;transform:scale(.7); } }

/* ── Alpha-specific keyframes ─────────────────────────────────── */
@keyframes gradientShift {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
@keyframes floatUp {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
@keyframes glowPulse {
  0%,100% { filter: drop-shadow(0 0 4px rgba(79,142,247,0.4)); }
  50%     { filter: drop-shadow(0 0 12px rgba(79,142,247,0.7)); }
}
@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ── Graph node transition (all themes) ───────────────────────── */
.node { transition: opacity 0.18s ease; }
.node:hover { filter: brightness(1.15); }

/* ── TG Mode semantic color palette ────────────────────────────────────────
   Single source of truth for all TG analytics rendering.
   All 330+ instances in transgenerational.js reference these vars.
   Overriding these vars changes ALL TG analytics colors in one place.
   var() works in inline style="" attributes — this is valid HTML/CSS.
   ─────────────────────────────────────────────────────────────────────── */

:root {
  /* TG Brand accent — always purple across themes (TG identity color) */
  --tg-accent:        rgba(139,92,246,1);
  --tg-accent-text:   #a78bfa;
  --tg-accent-bar:    rgba(139,92,246,.6);
  --tg-accent-dim:    rgba(139,92,246,.15);
  --tg-accent-soft:   rgba(139,92,246,.08);
  --tg-accent-border: rgba(139,92,246,.2);
  --tg-accent-glow:   rgba(139,92,246,.35);
  --tg-accent-strong: rgba(139,92,246,.5);

  /* Indigo neutral (personality, tendencies, neutral patterns) */
  --tg-neu-text:      #818cf8;
  --tg-neu-bar:       rgba(99,102,241,.6);
  --tg-neu-dim:       rgba(99,102,241,.15);
  --tg-neu-soft:      rgba(99,102,241,.08);
  --tg-neu-border:    rgba(99,102,241,.2);
  --tg-neu:           rgba(99,102,241,.55);

  /* Positive / Strengths / Success — follows theme --success */
  --tg-pos-text:      #34d399;
  --tg-pos-bar:       rgba(52,211,153,.8);
  --tg-pos-bar-mid:   rgba(52,211,153,.6);
  --tg-pos-dim:       rgba(52,211,153,.15);
  --tg-pos-soft:      rgba(52,211,153,.08);
  --tg-pos-border:    rgba(52,211,153,.25);
  --tg-pos:           rgba(52,211,153,.55);
  --tg-pos-gradient:  linear-gradient(90deg,rgba(52,211,153,.8),rgba(16,185,129,.6));

  /* Challenge / Warning — follows theme --warning */
  --tg-chal-text:     #fbbf24;
  --tg-chal-bar:      rgba(251,191,36,.55);
  --tg-chal-bar-mid:  rgba(251,191,36,.6);
  --tg-chal-dim:      rgba(251,191,36,.15);
  --tg-chal-soft:     rgba(251,191,36,.08);
  --tg-chal-border:   rgba(251,191,36,.2);
  --tg-chal:          rgba(251,191,36,.5);
  --tg-chal-gradient: linear-gradient(90deg,rgba(251,191,36,.55),rgba(245,158,11,.5));

  /* Danger / Risk patterns */
  --tg-dang-text:     #f87171;
  --tg-dang-bar:      rgba(248,113,113,.6);
  --tg-dang-dim:      rgba(248,113,113,.15);
  --tg-dang-soft:     rgba(248,113,113,.08);
  --tg-dang-border:   rgba(248,113,113,.2);
  --tg-dang:          rgba(248,113,113,.5);

  /* Mixed / Analytics gradients */
  --tg-bar-pos:   linear-gradient(90deg,rgba(52,211,153,.8),rgba(16,185,129,.6));
  --tg-bar-neu:   linear-gradient(90deg,rgba(99,102,241,.6),rgba(139,92,246,.4));
  --tg-bar-chal:  linear-gradient(90deg,rgba(251,191,36,.55),rgba(245,158,11,.5));
  --tg-bar-full:  linear-gradient(90deg,rgba(52,211,153,.8),rgba(251,191,36,.55),rgba(248,113,113,.6));

  /* TG chart / FRI colors */
  --tg-fri-high:   #f87171;
  --tg-fri-mod:    #fb923c;
  --tg-fri-low:    #fbbf24;
  --tg-fri-min:    var(--text-faint);
}

/* Tree Engine V3: animated inheritance-path overlay (marching dashes between
   matching persons). Marks a possible transmission branch — observational only. */
@keyframes inheritFlow { to { stroke-dashoffset: -22; } }
.inherit-path { animation: inheritFlow 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .inherit-path { animation: none; } }