/* ============================================================
   FUNDING CORPS — SHARED THEME
   Design tokens, reset and animations shared by every page
   (login.html, index.html, dashboard.html).

   Load this BEFORE each page's own <style> block so page-specific
   rules still win if a page needs a one-off override.
   ============================================================ */

:root {
  /* ---- canonical color tokens ---- */
  --bg-base:        #0b0d0f;
  --bg-panel:       #111418;
  --bg-card:        #181c20;
  --bg-hover:       #1e2227;
  --border:         #252a30;
  --border-lite:    #2a3038;
  --gold:           #F9CD6F;
  --gold-dim:       #c9a34e;
  --green:          #00d97e;
  --red:            #ff4757;
  --blue:           #3b9eff;
  --text-primary:   #dde1e7;
  --text-secondary: #7d8590;
  --text-dim:       #444c56;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;
  --font-ui:        'Barlow', sans-serif;
  --mobile-nav-h:   64px;

  /* ---- aliases: dashboard.html was written with different variable
     names for the same palette. Keep them here, unchanged, so
     dashboard.html's existing CSS keeps working with zero edits. ---- */
  --bg:   var(--bg-base);
  --bg1:  var(--bg-panel);
  --bg2:  var(--bg-card);
  --bg3:  var(--bg-hover);
  --gold2: var(--gold-dim);
  --txt:  var(--text-primary);
  --txt2: var(--text-secondary);
  --txt3: var(--text-dim);
  --mono: var(--font-mono);
  --ui:   var(--font-ui);

  /* ---- dashboard-only tokens (distinct values — not shared) ---- */
  --border2: #2d343c;
  --amber:   #ffb830;
  --purple:  #a78bfa;
  --nav-w:   220px;
  --top-h:   60px;
  --mob-nav: 60px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-lite); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }

@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes pulse   { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes slideIn { from { transform: translateX(110%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes fadeIn  { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeUp  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes flash   { 0%, 100% { background: transparent; } 50% { background: rgba(255,71,87,.1); } }