/* ============================================================
   FLUXIVE INVESTOR PORTAL — Design System Tokens
   Exact match: fluxive.ai dark mode (Studio Obsidian Standard)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');

:root {
  /* ── Core Palette (Fluxive Dark Standard) ── */
  --fx-obsidian:           #050505;
  --fx-surface:            #0d0f14;
  --fx-surface-2:          #111318;

  /* ── Brand Blue (NOT cyan — Fluxive's neon dark blue) ── */
  --fx-blue:               #3b82f6;   /* Blue-500 — Primary Neon */
  --fx-blue-dark:          #1e40af;   /* Blue-800 — Deep Brand */
  --fx-blue-glow:          rgba(59, 130, 246, 0.15);
  --fx-blue-border:        rgba(59, 130, 246, 0.3);
  --fx-violet:             #8B5CF6;   /* Machineforce Secondary */
  --fx-violet-glow:        rgba(139, 92, 246, 0.12);

  /* ── Text ── */
  --fx-text-primary:       #ffffff;
  --fx-text-secondary:     #94a3b8;
  --fx-text-muted:         rgba(255, 255, 255, 0.35);

  /* ── Glass (matched to .glass-card-executive) ── */
  --fx-glass-bg:           rgba(255, 255, 255, 0.02);
  --fx-glass-bg-hover:     rgba(255, 255, 255, 0.04);
  --fx-glass-border:       rgba(255, 255, 255, 0.08);
  --fx-glass-border-blue:  rgba(59, 130, 246, 0.3);
  --fx-glass-blur:         blur(16px);
  --fx-glass-blur-heavy:   blur(24px);
  --fx-glass-radius:       16px;
  --fx-glass-shadow:       0 20px 50px rgba(0, 0, 0, 0.5);
  --fx-glass-shadow-blue:  0 0 30px rgba(59, 130, 246, 0.08);

  /* ── Hold/Warning State ── */
  --fx-amber:              #F59E0B;
  --fx-amber-glow:         rgba(245, 158, 11, 0.15);
  --fx-amber-border:       rgba(245, 158, 11, 0.35);

  /* ── Typography ── */
  --font-heading:          'Exo 2', sans-serif;       /* Fluxive site exact */
  --font-body:             'Inter', sans-serif;
  --font-mono:             'JetBrains Mono', monospace;
  --font-academic:         'Crimson Text', serif;     /* Books / academic pedigree */

  /* ── Motion ── */
  --ease-expo:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:           cubic-bezier(0.4, 0, 0.2, 1);
  --ease-back:             cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:              0.2s;
  --dur-med:               0.45s;
  --dur-slow:              0.8s;
  --dur-cinematic:         1.2s;

  /* ── Gradients ── */
  --fx-gradient-radial:    radial-gradient(circle at 20% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 60%);
  --fx-gradient-heading:   linear-gradient(90deg, #ffffff 0%, #3b82f6 100%);
  --fx-gradient-divider:   linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.5), transparent);
}

body.solar-mode {
  --fx-obsidian:           #ffffff;
  --fx-surface:            #f8fafc;
  --fx-surface-2:          #f1f5f9;
  --fx-text-primary:       #0f172a;
  --fx-text-secondary:     #475569;
  --fx-text-muted:         rgba(15, 23, 42, 0.5);
  
  --fx-glass-bg:           rgba(0, 0, 0, 0.03);
  --fx-glass-bg-hover:     rgba(0, 0, 0, 0.06);
  --fx-glass-border:       rgba(0, 0, 0, 0.1);
  --fx-glass-border-blue:  rgba(37, 99, 235, 0.3);
  
  --fx-blue:               #2563eb;
  --fx-blue-dark:          #1d4ed8;
  --fx-blue-glow:          rgba(37, 99, 235, 0.15);
  --fx-blue-border:        rgba(37, 99, 235, 0.3);
  
  --fx-violet:             #7c3aed;
  --fx-violet-glow:        rgba(124, 58, 237, 0.12);
  
  --fx-amber:              #d97706;
  --fx-amber-glow:         rgba(217, 119, 6, 0.15);
  --fx-amber-border:       rgba(217, 119, 6, 0.35);

  --fx-gradient-heading:   linear-gradient(90deg, #0f172a 0%, #2563eb 100%);
}

/* ── Specific Solar Mode UI Overrides ── */
body.solar-mode .slide-content {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

body.solar-mode #hud {
    background: rgba(255, 255, 255, 0.85);
    border-bottom: 1px solid rgba(37, 99, 235, 0.2);
    color: var(--fx-text-primary);
}

body.solar-mode .hud-brand, 
body.solar-mode .slide-quote, 
body.solar-mode .stat-label {
    color: var(--fx-text-secondary);
}

body.solar-mode .deck-nav-prev,
body.solar-mode .deck-nav-next {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(37, 99, 235, 0.4);
}

body.solar-mode .slide-number,
body.solar-mode .book-title {
    color: var(--fx-blue-dark);
}

/* Fix for inline styles using raw white in cards */
body.solar-mode .sector-card,
body.solar-mode .fund-item,
body.solar-mode .honesty-note,
body.solar-mode .grant-pill,
body.solar-mode .robotics-card,
body.solar-mode .revenue-item {
    background: var(--fx-glass-bg);
    border-color: var(--fx-glass-border);
}


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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: var(--fx-obsidian);
  color: var(--fx-text-primary);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Shared Utilities ── */
.fx-glass {
  background: var(--fx-glass-bg);
  border: 1px solid var(--fx-glass-border);
  border-top-color: var(--fx-glass-border-blue);
  backdrop-filter: var(--fx-glass-blur);
  border-radius: var(--fx-glass-radius);
  box-shadow: var(--fx-glass-shadow), var(--fx-glass-shadow-blue);
}

.fx-glass:hover {
  background: var(--fx-glass-bg-hover);
  border-color: var(--fx-glass-border-blue);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(59,130,246,0.1);
}

.fx-text-gradient {
  background: var(--fx-gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fx-divider {
  height: 1px;
  background: var(--fx-gradient-divider);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.2);
  margin: 2.5rem 0;
}

.fx-eyebrow {
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fx-blue);
  text-shadow: 0 0 12px rgba(59, 130, 246, 0.6);
}

.fx-mono {
  font-family: var(--font-mono);
  color: var(--fx-blue);
}

/* ── Scroll Bar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--fx-obsidian); }
::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--fx-blue); }

/* ── Selection ── */
::selection { background: rgba(59,130,246,0.3); color: white; }