/**
 * CSS Custom Properties (Variables)
 * Dark Glass-morphism Theme with Gradient Accents
 */

:root {
  /* Gradient Colors - From Logo */
  --color-gradient-start: #4dc9e6;
  --color-gradient-mid: #3b82f6;
  --color-gradient-end: #2563eb;

  /* Primary Colors */
  --color-primary: #3b82f6;
  --color-primary-light: #60a5fa;
  --color-primary-dark: #2563eb;
  --color-secondary: #4dc9e6;

  /* Background Colors - Dark Theme */
  --color-bg-dark-1: #0a0e17;
  --color-bg-dark-2: #141824;
  --color-bg-dark-3: #1d1f35;
  --color-bg-purple: #2d1b4e;

  /* Glass-morphism Card */
  --color-glass-bg: rgba(20, 24, 36, 0.6);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --color-glass-hover: rgba(30, 34, 48, 0.7);

  --color-success: #10b981;
  --color-warning: #fbbf24;
  --color-danger: #ef4444;
  --color-info: #3b82f6;

  --color-bg: #0a0e17;
  --color-bg-card: rgba(20, 24, 36, 0.6);
  --color-text: #e5e7eb;
  --color-text-light: #9ca3af;
  --color-border: rgba(255, 255, 255, 0.1);
  --color-hover: rgba(30, 34, 48, 0.7);

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 24px;
  --font-size-xxl: 32px;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-xxl: 48px;

  /* Layout */
  --container-max-width: 1200px;
  --border-radius: 8px;
  --border-radius-sm: 4px;
  --border-radius-lg: 12px;
  --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  --box-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal: 1040;
  --z-tooltip: 1050;
}