/* ==============================================
   CSS Custom Properties - Dark Theme Variables
   Adapted from id.garden frontend app
   ============================================== */

:root {
  /* ============================================
     Primary Colors (Blue)
     ============================================ */
  --color-primary: #4a9eff;
  --color-primary-hover: #3a8eef;
  --color-primary-light: #6ab4ff;
  --color-primary-dark: #2a7edf;
  --color-primary-alpha-10: rgba(74, 158, 255, 0.1);
  --color-primary-alpha-20: rgba(74, 158, 255, 0.2);
  --color-primary-alpha-30: rgba(74, 158, 255, 0.3);
  --color-primary-alpha-50: rgba(74, 158, 255, 0.5);

  /* ============================================
     Neutral Colors
     ============================================ */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-transparent: transparent;

  /* ============================================
     Text Colors
     ============================================ */
  --color-text-primary: #e0e0e0;
  --color-text-secondary: #b0b0b0;
  --color-text-tertiary: #888888;
  --color-text-muted: #777777;
  --color-text-on-primary: #ffffff;
  --color-text-on-primary-alpha-70: rgba(255, 255, 255, 0.7);
  --color-text-on-primary-alpha-80: rgba(255, 255, 255, 0.8);

  /* ============================================
     Background Colors
     ============================================ */
  --color-bg-primary: #1a1a2e;
  --color-bg-secondary: #252542;
  --color-bg-tertiary: #2d2d4a;
  --color-bg-hover: #353558;
  --color-bg-hover-secondary: #3a3a5c;
  --color-bg-active: #454570;

  /* ============================================
     Border Colors
     ============================================ */
  --color-border-primary: rgba(100, 180, 255, 0.15);
  --color-border-secondary: rgba(100, 180, 255, 0.25);
  --color-border-tertiary: rgba(100, 180, 255, 0.08);
  --color-border-hover: rgba(100, 180, 255, 0.35);
  --color-border-focus: var(--color-primary);

  /* ============================================
     Status Colors
     ============================================ */
  /* Error */
  --color-error: #ff6b6b;
  --color-error-bg: rgba(255, 107, 107, 0.15);
  --color-error-border: rgba(255, 107, 107, 0.3);
  --color-error-hover-bg: rgba(255, 107, 107, 0.2);

  /* Success */
  --color-success: #66bb6a;
  --color-success-bg: rgba(102, 187, 106, 0.15);
  --color-success-border: rgba(102, 187, 106, 0.3);
  --color-success-text: #a8d8a8;

  /* Warning */
  --color-warning: #ffb74d;
  --color-warning-bg: rgba(255, 183, 77, 0.15);
  --color-warning-border: rgba(255, 183, 77, 0.3);
  --color-warning-text: #ffd54f;

  /* ============================================
     Shadow Colors
     ============================================ */
  --shadow-light: rgba(0, 0, 0, 0.2);
  --shadow-medium: rgba(0, 0, 0, 0.3);
  --shadow-dark: rgba(0, 0, 0, 0.5);
  --shadow-glow: rgba(74, 158, 255, 0.15);

  /* ============================================
     Background Gradient (Dark Blue-Green)
     ============================================ */
  --color-bg-gradient-start: #0a1628;
  --color-bg-gradient-mid: #0f2a3f;
  --color-bg-gradient-end: #1a3d2e;
  --color-bg-gradient:
    radial-gradient(ellipse at 20% 80%, rgba(30, 144, 180, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(50, 180, 120, 0.12) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(74, 158, 255, 0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 70%, rgba(100, 200, 180, 0.08) 0%, transparent 45%),
    linear-gradient(135deg, var(--color-bg-gradient-start) 0%, var(--color-bg-gradient-mid) 50%, var(--color-bg-gradient-end) 100%);

  /* ============================================
     Glass Effect Variables
     ============================================ */
  --glass-bg: rgba(20, 40, 70, 0.4);
  --glass-bg-secondary: rgba(20, 40, 70, 0.25);
  --glass-bg-hover: rgba(30, 55, 90, 0.5);
  --glass-border: rgba(100, 180, 255, 0.15);
  --glass-border-hover: rgba(100, 180, 255, 0.3);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --glass-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5);
  --glass-blur: 16px;
  --glass-blur-strong: 24px;

  /* ============================================
     Premium Gradient Variables
     ============================================ */
  --gradient-primary: linear-gradient(135deg, rgba(74, 158, 255, 0.6) 0%, rgba(50, 130, 220, 0.4) 50%, transparent 100%);
  --gradient-primary-hover: linear-gradient(135deg, rgba(90, 175, 255, 0.7) 0%, rgba(66, 146, 236, 0.5) 50%, transparent 100%);
  --gradient-button: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-button-hover: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 100%);

  /* ============================================
     Scrollbar Colors
     ============================================ */
  --color-scrollbar-track: transparent;
  --color-scrollbar-thumb: rgba(100, 180, 255, 0.2);
  --color-scrollbar-thumb-hover: rgba(100, 180, 255, 0.35);

  /* ============================================
     Spacing Scale
     ============================================ */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;

  /* ============================================
     Border Radius
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ============================================
     Transitions
     ============================================ */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* ============================================
     Z-Index Scale
     ============================================ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;

  /* ============================================
     Legacy Variables (for compatibility)
     Mapped to new system
     ============================================ */
  --highlight-color: var(--color-primary);
  --highlight-color-2: var(--color-primary-hover);
  --highlight-color-3: var(--color-primary-dark);
  --BG-white: var(--color-bg-primary);
  --text-color: var(--color-text-primary);
  --text-color-grey: var(--color-text-secondary);
  --medium-grey: var(--color-text-tertiary);
  --light-grey: var(--color-text-muted);
}