/* CSS Variables - Colors, spacing, z-index, animations */

:root {
  /* Global Colors - from base.css */
  --bg: #000011;
  --fg: #fff;
  --panel: #111;
  --panel-2: #222;
  --muted: #9aa;
  --brand: #2a9df4;

  /* Primary Colors */
  --primary-1: #3b5bdb;
  --primary-2: #7297f040;
  --primary-3: #1e3a8a;

  /* Secondary Colors */
  --secondary-1: #43a57d;
  --secondary-2: #e3c22c;
  --secondary-3: #e07b61;

  /* Greys */
  --greys-0: #1a1a1d;
  --greys-1: #3d3d40;
  --greys-2: #6c6c70;
  --greys-3: #c7c7cc;
  --greys-4: #8e8e93;
  --greys-5: #e4e4e7;
  --greys-6: #f5fcfd;
  --greys-7: #ffffff;

  /* Component Colors */
  --comp-1: #2e4ac2;
  --comp-2: #5979d0;
  --comp-3: #8fa7f5;
  --comp-4: #3c9e7e;
  --comp-5: #6ac8a9;
  --comp-6: #d4b743;
  --comp-7: #f0c25a;
  --comp-8: #d87c71;
  --comp-9: #e99489;
  --comp-10: #d97a48;
  --comp-11: #e39a6b;
  --comp-12: #8053c2;
  --comp-13: #a38ad3;
  --comp-14: #1b8f85;
  --comp-15: #3ca6a0;
  --comp-16: #ff3b30;

  /* Additional Colors */
  --bg-dark: #0f0f0f;
  --bg-darker: #101010;
  --border-color: #444;
  --white: #ffffff;
  --black: #000000;
  --grey-light: #e9e9e9;
  --grey-lighter: #f5f5f5;

  /* Dimensions */
  --header-height: 60px;
  --sidebar-collapsed-width: 60px;
  --input-height: 42px;

  /* Spacing */
  --sp-xs: 0.25rem;
  --sp-sm: 0.5rem;
  --sp-md: 1rem;
  --sp-lg: 1.5rem;
  --sp-xl: 2rem;

  /* Border radius */
  --br-sm: 4px;
  --br-md: 8px;
  --br-lg: 10px;
  --br-full: 999px;

  /* Z-index */
  --z-bottom-nav: 15;
  --z-add-btn: 20;
  --z-user-menu: 40;
  --z-details-panel: 80;
  --z-modal: 30;
  --z-roles-panel: 1200;
  --z-hover-tip: 100;

  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.35);

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.35s cubic-bezier(0.4, 0.2, 0.2, 1);

  /* Breakpoints - Desktop First */
  --lg: 1200px; /* Large screens (desktop) */
  --md: 768px; /* Medium screens (tablet) */
  --sm: 480px; /* Small screens (mobile) */
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000;
    --fg: #ddd;
  }
}