/* ================================================
   VELO AI STUDIO — GLOBAL THEME SYSTEM
   Follows browser/OS prefers-color-scheme setting.
   Include this file in every page BEFORE inline styles.
   ================================================ */

/* ── Dark mode (default) ── */
:root {
  --bg:       #0a0a0f;
  --surface:  #13131a;
  --surface2: #1c1c28;
  --accent:   #7c3aed;
  --accent2:  #06b6d4;
  --accent3:  #f59e0b;
  --text:     #e8e8f0;
  --muted:    #6b6b80;
  --prose:    #c8c8d8;
  --success:  #10b981;
  --error:    #ef4444;
  --border:   #2a2a3a;
}

/* ── Light mode — mirrors OS/browser preference ── */
@media (prefers-color-scheme: light) {
  :root {
    --bg:       #f8fafc;
    --surface:  #ffffff;
    --surface2: #f1f5f9;
    --accent:   #7c3aed;
    --accent2:  #0891b2;
    --accent3:  #d97706;
    --text:     #0f172a;
    --muted:    #64748b;
    --prose:    #374151;
    --success:  #059669;
    --error:    #dc2626;
    --border:   #e2e8f0;
  }

  /* index.html app-specific overrides */
  .modal {
    background-color: rgba(255, 255, 255, 0.85) !important;
  }
  .modal-close {
    color: var(--text);
  }
  .redo-btn {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text);
    border: 1px solid var(--border);
  }
  .step-num {
    color: #ffffff;
  }
  .img-loading {
    background: rgba(124, 58, 237, 0.05);
  }
  .donation-widget {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  }
}