/* =====================================
   HERSAFE DESIGN SYSTEM
   Your Voice. Your Safety. Your Future.
===================================== */

:root {
  /* Brand Colors */
  --primary: #7654a6;
  --primary-dark: #5e408c;
  --primary-light: #e8ddf7;

  --secondary: #f8e8ef;
  --mint: #ddefe8;
  --cream: #fff8ec;
  --plum: #343044;

  /* Light Theme */
  --bg: #fffdfb;
  --bg-soft: #f8f5fb;
  --surface: #ffffff;
  --surface-hover: #f5f0fa;

  --text: #343044;
  --text-muted: #777184;
  --border: #e9e3ee;

  /* Status Colors */
  --success: #2e8b68;
  --warning: #d18a35;
  --danger: #c94f67;
  --info: #547eb5;

  /* Typography */
  --font-main: "Inter", "Segoe UI", sans-serif;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 4px 12px rgba(52, 48, 68, 0.05);
  --shadow-md: 0 10px 30px rgba(52, 48, 68, 0.08);
  --shadow-lg: 0 20px 60px rgba(52, 48, 68, 0.12);

  /* Layout */
  --container: 1200px;
  --header-height: 76px;

  /* Animation */
  --transition: 0.25s ease;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg: #191722;
  --bg-soft: #211e2b;
  --surface: #282433;
  --surface-hover: #342e42;

  --text: #f4eff9;
  --text-muted: #b7aec5;
  --border: #41394d;

  --primary: #b99be5;
  --primary-dark: #a17ed4;
  --primary-light: #3d3152;

  --secondary: #46313f;
  --mint: #263e38;
  --cream: #413a2f;
  --plum: #f4eff9;

  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
}