/* ═══════════════════════════════════════════════════════
   SwipeHome Web App — styles.css
   Design System: Dark mode, Indigo primary
   Matches swipehomeapp.io design system
   ═══════════════════════════════════════════════════════ */

/* ── CSS Variables ──────────────────────────────────── */
:root {
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --primary-bg: rgba(99, 102, 241, 0.1);
  --primary-border: rgba(99, 102, 241, 0.2);
  --primary-glow: rgba(99, 102, 241, 0.35);

  --success: #00d48a;
  --success-bg: rgba(0, 212, 138, 0.1);
  --success-border: rgba(0, 212, 138, 0.2);
  --warning: #d97706;
  --warning-bg: rgba(217, 119, 6, 0.1);
  --warning-border: rgba(217, 119, 6, 0.2);
  --danger: #ff4458;
  --danger-bg: rgba(255, 68, 88, 0.1);
  --danger-border: rgba(255, 68, 88, 0.2);

  --text: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #8888a0;
  --text-tertiary: #6b6b80;
  --text-muted: #c4c4d4;
  --text-placeholder: rgba(255, 255, 255, 0.3);
  --bg: #0f0f1a;
  --surface: #1a1a2e;
  --surface-alt: rgba(255, 255, 255, 0.04);
  --border: rgba(255, 255, 255, 0.06);
  --border-strong: rgba(255, 255, 255, 0.1);
  --border-accent: rgba(99, 102, 241, 0.08);
  --card-border: rgba(255, 255, 255, 0.08);
  --input-bg: rgba(255, 255, 255, 0.06);
  --input-border: rgba(255, 255, 255, 0.1);
  --overlay: rgba(0, 0, 0, 0.7);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --background: #0f0f1a;
  --card-bg: #1a1a2e;
}