/* ============================================
   ZAJMODULES DESIGN TOKENS
   ============================================
   Central Source of Truth for all ZajModule styling
   
   Update colors HERE and all modules inherit them.
   No hardcoded colors in module CSS!
   
   Zajaly: ZajModules Design System
   Last Updated: 2024-12-26
   ============================================ */

:root {
  /* ============================================
     BRAND COLORS (Custojo Default)
     ============================================ */
  --zajmod-primary: #1DB764;          /* Emerald Green - Main CTA */
  --zajmod-primary-hover: #0F9B4A;    /* Deep Emerald - Hover state */
  --zajmod-primary-light: #2ECC71;    /* Mint Green - Accents */
  --zajmod-primary-rgb: 29, 183, 100; /* For rgba() usage */
  
  /* Gradients */
  --zajmod-gradient-primary: linear-gradient(135deg, #1DB764 0%, #0F9B4A 100%);
  --zajmod-gradient-accent: linear-gradient(90deg, #1DB764, #2ECC71);

  /* ============================================
     SEMANTIC COLORS
     ============================================ */
  --zajmod-success: #10B981;
  --zajmod-warning: #F59E0B;
  --zajmod-error: #EF4444;
  --zajmod-info: #3B82F6;

  /* ============================================
     LIGHT MODE NEUTRALS
     ============================================ */
  --zajmod-bg-light: #F8FAFB;
  --zajmod-bg-card-light: #FFFFFF;
  --zajmod-bg-overlay-light: rgba(0, 0, 0, 0.5);
  --zajmod-text-primary-light: #1A1F26;
  --zajmod-text-secondary-light: #6B7280;
  --zajmod-text-muted-light: #9CA3AF;
  --zajmod-border-light: #E5E7EB;
  --zajmod-border-focus-light: #D1D5DB;

  /* ============================================
     DARK MODE NEUTRALS
     ============================================ */
  --zajmod-bg-dark: #0F1419;
  --zajmod-bg-card-dark: #1A1F26;
  --zajmod-bg-overlay-dark: rgba(0, 0, 0, 0.7);
  --zajmod-text-primary-dark: #E8ECEF;
  --zajmod-text-secondary-dark: #9CA3AF;
  --zajmod-text-muted-dark: #6B7280;
  --zajmod-border-dark: #374151;
  --zajmod-border-focus-dark: #4B5563;

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  --zajmod-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --zajmod-font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --zajmod-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  --zajmod-font-size-xs: 0.75rem;   /* 12px */
  --zajmod-font-size-sm: 0.875rem;  /* 14px */
  --zajmod-font-size-base: 1rem;    /* 16px */
  --zajmod-font-size-lg: 1.125rem;  /* 18px */
  --zajmod-font-size-xl: 1.25rem;   /* 20px */
  --zajmod-font-size-2xl: 1.5rem;   /* 24px */

  /* ============================================
     SPACING
     ============================================ */
  --zajmod-spacing-xs: 0.25rem;  /* 4px */
  --zajmod-spacing-sm: 0.5rem;   /* 8px */
  --zajmod-spacing-md: 1rem;     /* 16px */
  --zajmod-spacing-lg: 1.5rem;   /* 24px */
  --zajmod-spacing-xl: 2rem;     /* 32px */

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --zajmod-radius-none: 0;
  --zajmod-radius-sm: 4px;
  --zajmod-radius-md: 8px;
  --zajmod-radius-lg: 12px;
  --zajmod-radius-xl: 16px;
  --zajmod-radius-full: 9999px;

  /* ============================================
     SHADOWS
     ============================================ */
  --zajmod-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --zajmod-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --zajmod-shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
  --zajmod-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.08);
  --zajmod-shadow-primary: 0 4px 12px rgba(29, 183, 100, 0.25);

  /* ============================================
     ANIMATION & TRANSITIONS
     ============================================ */
  --zajmod-transition-fast: 150ms ease-out;
  --zajmod-transition-normal: 250ms ease-out;
  --zajmod-transition-slow: 350ms ease-out;
  --zajmod-transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ============================================
     Z-INDEX SCALE
     ============================================ */
  --zajmod-z-dropdown: 1000;
  --zajmod-z-sticky: 1020;
  --zajmod-z-fixed: 1030;
  --zajmod-z-modal-backdrop: 1040;
  --zajmod-z-modal: 1050;
  --zajmod-z-popover: 1060;
  --zajmod-z-tooltip: 1070;
}

/* ============================================
   ACTIVE THEME VARIABLES
   These change based on light/dark mode
   ============================================ */

/* Default: Light Mode */
:root,
body:not(.dark-mode):not(.dark):not([data-theme="dark"]):not([data-layout-mode="dark"]) {
  --zajmod-bg: var(--zajmod-bg-light);
  --zajmod-bg-card: var(--zajmod-bg-card-light);
  --zajmod-bg-overlay: var(--zajmod-bg-overlay-light);
  --zajmod-text: var(--zajmod-text-primary-light);
  --zajmod-text-secondary: var(--zajmod-text-secondary-light);
  --zajmod-text-muted: var(--zajmod-text-muted-light);
  --zajmod-border: var(--zajmod-border-light);
  --zajmod-border-focus: var(--zajmod-border-focus-light);
}

/* Dark Mode - Multiple detection methods */
body.dark-mode,
body.dark,
[data-theme="dark"],
[data-layout-mode="dark"],
[data-zajmod-theme="dark"] {
  --zajmod-bg: var(--zajmod-bg-dark);
  --zajmod-bg-card: var(--zajmod-bg-card-dark);
  --zajmod-bg-overlay: var(--zajmod-bg-overlay-dark);
  --zajmod-text: var(--zajmod-text-primary-dark);
  --zajmod-text-secondary: var(--zajmod-text-secondary-dark);
  --zajmod-text-muted: var(--zajmod-text-muted-dark);
  --zajmod-border: var(--zajmod-border-dark);
  --zajmod-border-focus: var(--zajmod-border-focus-dark);
}

/* ============================================
   MULTI-COLOR THEME SYNC
   Inherit from app's color picker if available
   ============================================ */

/* Sync with CodeCanyon app color picker */
@supports (--css: variables) {
  :root {
    /* Use app's custom color if available, otherwise use brand default */
    --zajmod-primary: var(--color-customColor, #1DB764);
  }
}

/* Theme class overrides (if app uses theme classes) */
.theme-1 { --zajmod-primary: #3366FF; --zajmod-primary-hover: #2855CC; }
.theme-2 { --zajmod-primary: #6366F1; --zajmod-primary-hover: #4F46E5; }
.theme-3 { --zajmod-primary: #1DB764; --zajmod-primary-hover: #0F9B4A; }  /* Custojo default */
.theme-4 { --zajmod-primary: #F59E0B; --zajmod-primary-hover: #D97706; }
.theme-5 { --zajmod-primary: #EF4444; --zajmod-primary-hover: #DC2626; }
.theme-6 { --zajmod-primary: #8B5CF6; --zajmod-primary-hover: #7C3AED; }

/* ============================================
   REDUCED MOTION
   Respect user preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --zajmod-transition-fast: 0ms;
    --zajmod-transition-normal: 0ms;
    --zajmod-transition-slow: 0ms;
    --zajmod-transition-spring: 0ms;
  }
}

/* ============================================
   HIGH CONTRAST MODE
   Enhanced accessibility
   ============================================ */
@media (prefers-contrast: high) {
  :root {
    --zajmod-border-light: #000000;
    --zajmod-border-dark: #FFFFFF;
    --zajmod-shadow-sm: none;
    --zajmod-shadow-md: none;
    --zajmod-shadow-lg: 0 0 0 2px var(--zajmod-primary);
  }
}