/* =============================================
   PIPA OS — CSS Variables & Reset
   ============================================= */
:root {
  --font: 'Inter', -apple-system, sans-serif;
  /* Brand colors */
  --orange: #F7941D;
  --magenta: #E91E8C;
  --cyan: #00BCD4;
  --yellow: #FFD600;
  --green: #4CAF50;
  --red: #EF5350;
  /* Dark theme (default) */
  --bg-primary: #0A0A1A;
  --bg-secondary: #12122A;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.06);
  --border-hover: rgba(255,255,255,0.12);
  --text-primary: #F0F0F5;
  --text-secondary: #8888AA;
  --text-muted: #555577;
  --glass-blur: blur(20px);
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --accent: var(--orange);
}
[data-theme="light"] {
  --bg-primary: #F4F5F7;
  --bg-secondary: #FFFFFF;
  --bg-card: rgba(255,255,255,0.7);
  --bg-card-hover: rgba(255,255,255,0.9);
  --border: rgba(0,0,0,0.08);
  --border-hover: rgba(0,0,0,0.15);
  --text-primary: #1A1A2E;
  --text-secondary: #666680;
  --text-muted: #999;
  --shadow: 0 8px 32px rgba(0,0,0,0.08);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:var(--font); background:var(--bg-primary); color:var(--text-primary); min-height:100vh; transition:background .3s,color .3s; }
::selection { background:transparent; color:inherit; }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }