/* ==========================================================================
   EventHub — Design System: CSS Variables (Light & Dark themes)
   ========================================================================== */

:root {
  /* Brand */
  --primary-color: #6366f1;
  --primary-hover: #4f46e5;
  --primary-light: #eef2ff;
  --secondary-color: #f43f5e;
  --accent-color: #06b6d4;
  --success-color: #16a34a;
  --success-bg: #dcfce7;
  --warning-color: #d97706;
  --warning-bg: #fef3c7;
  --danger-color: #dc2626;
  --danger-bg: #fee2e2;
  --info-color: #0284c7;
  --info-bg: #e0f2fe;

  /* Surfaces */
  --background-color: #f6f7fb;
  --surface-color: #ffffff;
  --surface-alt-color: #f1f2f8;
  --header-bg: rgba(255, 255, 255, 0.85);

  /* Text */
  --text-color: #1a1d29;
  --secondary-text-color: #5b5f73;
  --muted-text-color: #8b8fa3;

  /* Borders / Shadows */
  --border-color: #e6e7f0;
  --border-color-strong: #d3d5e4;
  --hover-color: #f0f1f9;
  --shadow-sm: 0 1px 2px rgba(23, 24, 40, 0.06);
  --shadow-md: 0 6px 16px rgba(23, 24, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(23, 24, 40, 0.14);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);

  /* Radii & spacing */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Gradient */
  --gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  --gradient-soft: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 100%);

  /* Transition */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;

  color-scheme: light;
}

[data-theme="dark"] {
  --primary-color: #818cf8;
  --primary-hover: #a5b4fc;
  --primary-light: #2a2c47;
  --secondary-color: #fb7185;
  --accent-color: #22d3ee;
  --success-color: #4ade80;
  --success-bg: #123222;
  --warning-color: #fbbf24;
  --warning-bg: #3a2a0c;
  --danger-color: #f87171;
  --danger-bg: #3a1414;
  --info-color: #38bdf8;
  --info-bg: #0d2a3a;

  --background-color: #0f1117;
  --surface-color: #171922;
  --surface-alt-color: #1e212c;
  --header-bg: rgba(15, 17, 23, 0.85);

  --text-color: #f1f2f8;
  --secondary-text-color: #b3b6c8;
  --muted-text-color: #7d8098;

  --border-color: #2a2d3b;
  --border-color-strong: #3a3e50;
  --hover-color: #1f222e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.35);

  --gradient-soft: linear-gradient(135deg, #1c1e3a 0%, #331c2e 100%);

  color-scheme: dark;
}