/**
 * Vezir Flux - Core Design Tokens
 * Global CSS custom properties for theming and consistency
 * Version: 2.1.0 - Light/Dark Mode Support
 */

/* ============================================
   LIGHT THEME (Default)
   ============================================ */
:root {
  /* Brand Colors */
  --vf-primary: #4A148C;
  --vf-secondary: #00BCD4;
  
  /* Light Mode Surfaces */
  --vf-dark: #1A1A1B;
  --vf-surface: #FFFFFF;
  --vf-surface-variant: #F4F4F5;
  --vf-text-primary: #18181B;
  --vf-text-secondary: #71717A;
  --vf-flux-gradient: linear-gradient(135deg, var(--vf-primary) 0%, #6A1B9A 100%);
  --vf-glow-cyan: 0 0 15px rgba(0, 188, 212, 0.4);
  
  /* Component-specific */
  --vf-input-bg: #FFFFFF;
  --vf-card-border: rgba(0, 0, 0, 0.08);
  --vf-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --vf-sidebar-gradient: linear-gradient(180deg, #F8F8FA 0%, #FFFFFF 100%);
  
  /* Primary Colors */
  --flux-primary: var(--vf-primary);
  --flux-primary-hover: #6A1B9A;
  --flux-primary-active: #7B1FA2;
  --flux-primary-light: #E1BEE7;
  --flux-primary-dark: #38006B;
  --flux-table-row-selected-bg: var(--flux-primary-light);
  --flux-table-row-selected-hover-bg: #d7aee2;
  
  /* Semantic Colors */
  --flux-success: #10b981;
  --flux-success-hover: #059669;
  --flux-success-light: #D1FAE5;
  
  --flux-danger: #ef4444;
  --flux-danger-hover: #dc2626;
  --flux-danger-light: #FEE2E2;
  
  --flux-warning: #f59e0b;
  --flux-warning-hover: #d97706;
  --flux-warning-light: #FEF3C7;
  
  --flux-info: var(--vf-secondary);
  --flux-info-hover: #00ACC1;
  --flux-info-light: #E0F7FA;
  
  /* Text Colors */
  --flux-text-primary: var(--vf-text-primary);
  --flux-text-secondary: var(--vf-text-secondary);
  --flux-text-muted: #A1A1AA;
  --flux-text-disabled: #D4D4D8;
  
  /* Background Colors */
  --flux-bg-primary: #FFFFFF;
  --flux-bg-secondary: #F4F4F5;
  --flux-bg-tertiary: #E4E4E7;
  --flux-bg-hover: #F4F4F5;
  
  /* Border Colors */
  --flux-border: #E4E4E7;
  --flux-border-hover: #D4D4D8;
  --flux-border-focus: var(--vf-secondary);
  
  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --flux-font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --flux-font-family-mono: 'Courier New', Courier, monospace;
  
  --flux-font-size-xs: 0.75rem;    /* 12px */
  --flux-font-size-sm: 0.875rem;   /* 14px */
  --flux-font-size-md: 1rem;       /* 16px */
  --flux-font-size-lg: 1.125rem;   /* 18px */
  --flux-font-size-xl: 1.25rem;    /* 20px */
  --flux-font-size-2xl: 1.5rem;    /* 24px */
  
  --flux-font-weight-normal: 400;
  --flux-font-weight-medium: 500;
  --flux-font-weight-semibold: 600;
  --flux-font-weight-bold: 700;
  
  --flux-line-height-tight: 1.25;
  --flux-line-height-normal: 1.5;
  --flux-line-height-relaxed: 1.75;
  
  /* ============================================
     SPACING
     ============================================ */
  --flux-spacing-0: 0;
  --flux-spacing-1: 0.25rem;   /* 4px */
  --flux-spacing-2: 0.5rem;    /* 8px */
  --flux-spacing-3: 0.75rem;   /* 12px */
  --flux-spacing-4: 1rem;      /* 16px */
  --flux-spacing-5: 1.25rem;   /* 20px */
  --flux-spacing-6: 1.5rem;    /* 24px */
  --flux-spacing-8: 2rem;      /* 32px */
  --flux-spacing-10: 2.5rem;   /* 40px */
  --flux-spacing-12: 3rem;     /* 48px */
  --flux-spacing-16: 4rem;     /* 64px */
  
  /* ============================================
     BORDER RADIUS
     ============================================ */
  --flux-radius-none: 0;
  --flux-radius-sm: 0.25rem;   /* 4px */
  --flux-radius-md: 0.375rem;  /* 6px */
  --flux-radius-lg: 0.5rem;    /* 8px */
  --flux-radius-xl: 0.75rem;   /* 12px */
  --flux-radius-2xl: 1rem;     /* 16px */
  --flux-radius-full: 9999px;
  
  /* ============================================
     SHADOWS
     ============================================ */
  --flux-shadow-none: none;
  --flux-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --flux-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --flux-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --flux-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --flux-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* Focus shadows */
  --flux-shadow-focus: 0 0 0 3px rgba(74, 20, 140, 0.5);
  --flux-shadow-focus-danger: 0 0 0 3px rgba(239, 68, 68, 0.5);
  --flux-shadow-focus-success: 0 0 0 3px rgba(16, 185, 129, 0.5);
  --flux-shadow-focus-cyan: var(--vf-glow-cyan);
  
  /* ============================================
     TRANSITIONS
     ============================================ */
  --flux-transition-fast: 0.1s ease;
  --flux-transition-base: 0.2s ease;
  --flux-transition-slow: 0.3s ease;
  --flux-transition-slower: 0.5s ease;
  
  /* ============================================
     Z-INDEX LAYERS
     ============================================ */
  --flux-z-base: 0;
  --flux-z-dropdown: 1000;
  --flux-z-sticky: 1020;
  --flux-z-fixed: 1030;
  --flux-z-modal-backdrop: 1040;
  --flux-z-modal: 1050;
  --flux-z-popover: 1060;
  --flux-z-tooltip: 1070;
  --flux-z-toast: 1080;
  
  /* ============================================
     BREAKPOINTS (for reference in JS)
     ============================================ */
  --flux-breakpoint-xs: 0;
  --flux-breakpoint-sm: 640px;
  --flux-breakpoint-md: 768px;
  --flux-breakpoint-lg: 1024px;
  --flux-breakpoint-xl: 1280px;
  --flux-breakpoint-2xl: 1536px;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"],
:root.dark {
  /* Dark Mode Surfaces */
  --vf-surface: #1E1E20;
  --vf-surface-variant: #27272A;
  --vf-text-primary: #FAFAFA;
  --vf-text-secondary: #A1A1AA;
  --vf-glow-cyan: 0 0 15px rgba(0, 229, 255, 0.4);
  
  /* Component-specific */
  --vf-input-bg: #121214;
  --vf-card-border: rgba(255, 255, 255, 0.08);
  --vf-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  --vf-sidebar-gradient: linear-gradient(180deg, #2E0D56 0%, #1A1A1B 100%);
  
  /* Text Colors */
  --flux-text-primary: #FAFAFA;
  --flux-text-secondary: #A1A1AA;
  --flux-text-muted: #71717A;
  --flux-text-disabled: #52525B;
  
  /* Background Colors */
  --flux-bg-primary: #09090B;
  --flux-bg-secondary: #18181B;
  --flux-bg-tertiary: #27272A;
  --flux-bg-hover: #3F3F46;
  
  /* Border Colors */
  --flux-border: #3F3F46;
  --flux-border-hover: #52525B;
  
  /* Semantic Light variants for dark mode */
  --flux-primary-light: #6A1B9A;
  --flux-table-row-selected-bg: #4c2a66;
  --flux-table-row-selected-hover-bg: #5a337a;
  --flux-success-light: #065F46;
  --flux-danger-light: #991B1B;
  --flux-warning-light: #92400E;
  --flux-info-light: #164E63;
}

/* Auto dark mode based on system preference */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vf-surface: #1E1E20;
    --vf-surface-variant: #27272A;
    --vf-text-primary: #FAFAFA;
    --vf-text-secondary: #A1A1AA;
    --vf-input-bg: #121214;
    --vf-card-border: rgba(255, 255, 255, 0.08);
    --vf-card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    --vf-sidebar-gradient: linear-gradient(180deg, #2E0D56 0%, #1A1A1B 100%);
    --flux-text-primary: #FAFAFA;
    --flux-text-secondary: #A1A1AA;
    --flux-text-muted: #71717A;
    --flux-text-disabled: #52525B;
    --flux-bg-primary: #09090B;
    --flux-bg-secondary: #18181B;
    --flux-bg-tertiary: #27272A;
    --flux-bg-hover: #3F3F46;
    --flux-border: #3F3F46;
    --flux-border-hover: #52525B;
    --flux-primary-light: #6A1B9A;
    --flux-table-row-selected-bg: #4c2a66;
    --flux-table-row-selected-hover-bg: #5a337a;
    --flux-success-light: #065F46;
    --flux-danger-light: #991B1B;
    --flux-warning-light: #92400E;
    --flux-info-light: #164E63;
  }
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --flux-transition-fast: 0s;
    --flux-transition-base: 0s;
    --flux-transition-slow: 0s;
    --flux-transition-slower: 0s;
  }
}

/* ============================================
   BASE STYLES
   ============================================ */
body {
    font-family: var(--flux-font-family);
    color: var(--flux-text-primary);
    background-color: var(--flux-bg-primary);
    line-height: var(--flux-line-height-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
    box-sizing: border-box;
}