/**
 * Design Tokens - Centralized CSS Variables
 * 
 * All design values should use these variables for consistency.
 * Values match antdTheme.js - keep them in sync.
 * 
 * Usage:
 *   color: var(--color-primary);
 *   margin-bottom: var(--spacing-md);
 *   border-radius: var(--radius-md);
 */

:root {
  /* ===========================================
   * COLORS
   * =========================================== */
  
  /* Brand colors */
  --color-primary: rgb(16, 185, 129);           /* #10b981 - main brand green */
  --color-primary-hover: rgb(13, 148, 103);     /* #0d9467 - darker for hover */
  --color-primary-active: rgb(10, 120, 83);     /* #0a7853 - even darker for active */
  --color-primary-light: rgba(16, 185, 129, 0.1);  /* light green for backgrounds */
  --color-primary-transparent: rgba(16, 185, 129, 0.2);
  
  /* Error/danger colors */
  --color-error: rgb(239, 94, 172);             /* #ef5eac - pink/magenta */
  --color-error-hover: rgb(215, 75, 150);
  --color-error-light: rgba(239, 94, 172, 0.1);
  
  /* Secondary colors */
  --color-secondary: rgb(41, 46, 86);           /* #292e56 - dark blue */
  --color-warning: #faad14;
  --color-warning-bg: #fff9e6;
  --color-warning-border: #ffe58f;
  --color-success: rgb(16, 185, 129);           /* same as primary */
  --color-info: rgb(16, 185, 129);              /* same as primary */
  
  /* Text colors */
  --color-text: rgba(0, 0, 0, 0.88);            /* primary text */
  --color-text-secondary: rgba(0, 0, 0, 0.65);  /* secondary text */
  --color-text-tertiary: rgba(0, 0, 0, 0.45);   /* tertiary/placeholder */
  --color-text-disabled: rgba(0, 0, 0, 0.25);   /* disabled text */
  --color-text-inverse: #ffffff;                /* text on dark backgrounds */
  
  /* Background colors */
  --color-bg-page: #f5f5f5;                     /* page background */
  --color-bg-container: #ffffff;                /* card/container background */
  --color-bg-elevated: #ffffff;                 /* modals, dropdowns */
  --color-bg-hover: rgba(0, 0, 0, 0.04);        /* hover state */
  
  /* Border colors */
  --color-border: #d9d9d9;                      /* default border */
  --color-border-light: #f0f0f0;                /* light border (dividers) */
  --color-border-dark: #bfbfbf;                 /* darker border */
  
  /* Skeleton colors (for loading animations) */
  --color-skeleton: #f0f0f0;                    /* skeleton background */
  --color-skeleton-gradient: #e0e0e0;           /* skeleton shimmer highlight */
  
  /* Social colors */
  --color-facebook: #3b5998;
  --color-google: #db4437;
  
  /* Legacy aliases (for backward compatibility) */
  --primary-color: var(--color-primary);
  --primary-color1: var(--color-primary);
  --primary-color-transparent: var(--color-primary-transparent);
  --primary-color-transparent1: var(--color-primary-light);
  --primary-color-transparent2: rgba(16, 185, 129, 0.8);
  --primary-color-hover: var(--color-primary-hover);
  --secondary-color: var(--color-secondary);
  --error-color: var(--color-error);
  --text-color: var(--color-secondary);
  --background-primary: #b8d2c8;
  --background-secondary-primary: var(--color-secondary);
  --facebook-color: var(--color-facebook);
  --facebook-hover-opacity: 0.6;
  
  /* ===========================================
   * SPACING
   * =========================================== */
  
  --spacing-none: 0;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* ===========================================
   * TYPOGRAPHY
   * =========================================== */
  
  /* Font family */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  
  /* Font sizes */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 14px;      /* alias for base */
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 38px;
  
  /* Font weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* Line heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* ===========================================
   * BORDER RADIUS
   * =========================================== */
  
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;     /* for pills/circles */
  
  /* ===========================================
   * SHADOWS
   * =========================================== */
  
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.25);
  
  /* Card shadow (commonly used) */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.12);
  
  /* ===========================================
   * Z-INDEX SCALE
   * =========================================== */
  
  --z-base: 0;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  
  /* ===========================================
   * TRANSITIONS
   * =========================================== */
  
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* ===========================================
   * CONTROL HEIGHTS
   * =========================================== */
  
  --control-height-sm: 24px;
  --control-height-md: 32px;
  --control-height-lg: 40px;
  
  /* ===========================================
   * BREAKPOINTS (for reference in JS)
   * =========================================== */
  
  --breakpoint-xs: 480px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1600px;
}

/* ===========================================
 * DARK THEME OVERRIDES
 * 
 * Complete dark mode color palette for admin panel.
 * Applied when body has .dark-theme class.
 * =========================================== */
.dark-theme {
  /* Text colors */
  --color-text: rgba(255, 255, 255, 0.88);
  --color-text-secondary: rgba(255, 255, 255, 0.65);
  --color-text-tertiary: rgba(255, 255, 255, 0.45);
  --color-text-disabled: rgba(255, 255, 255, 0.25);
  --color-text-inverse: #141414;
  
  /* Background colors */
  --color-bg-page: #141414;
  --color-bg-container: #1f1f1f;
  --color-bg-elevated: #262626;
  --color-bg-hover: rgba(255, 255, 255, 0.08);
  --color-bg-active: rgba(255, 255, 255, 0.12);
  
  /* Border colors */
  --color-border: #4a4a4a;
  --color-border-light: #303030;
  --color-border-dark: #5a5a5a;
  
  /* Skeleton colors (for loading animations) */
  --color-skeleton: #303030;                    /* skeleton background - dark */
  --color-skeleton-gradient: #404040;           /* skeleton shimmer highlight - dark */
  
  /* Warning colors - adjusted for dark mode */
  --color-warning-bg: #3d3322;
  --color-warning-border: #594e2c;
  
  /* Brand colors - slightly adjusted for dark mode visibility */
  --color-primary-light: rgba(16, 185, 129, 0.15);
  --color-primary-transparent: rgba(16, 185, 129, 0.25);
  --color-error-light: rgba(239, 94, 172, 0.15);
  
  /* Shadows - darker and more subtle in dark mode */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3), 0 10px 10px rgba(0, 0, 0, 0.2);
  --shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
  
  /* Legacy aliases for backward compatibility */
  --text-color: rgba(255, 255, 255, 0.88);
  --background-primary: #1a2a24;
  --background-secondary-primary: #1f1f1f;
}

/* Light theme explicit class (for when we need to force light mode) */
.light-theme {
  /* Inherits all :root defaults */
}