/**
 * Jatelgram Variables – CSS Custom Properties & Dark Mode
 * @package Jatelgram
 * @version 3.1.0 – Added spacing variables for unified design system
 * 
 * Responsibilities:
 * - Global CSS variables (colors, spacing, shadows, transitions, sidebar)
 * - Footer variables (background, border, text, active states)
 * - Dark mode overrides for all variables
 * - No layout or component styles
 */

:root {
    /* Backgrounds & Borders */
    --farghar-footer-bg: #f6f8fa;
    --farghar-header-bg: #f6f8fa;
    --farghar-black: #0d1117;
    --farghar-white: #fff;
    --farghar-footer-border: #d0d7de;
    --farghar-header-border: #d0d7de;
    
    /* Text Colors */
    --farghar-text-primary: #1a1e23;
    --farghar-text-secondary: #57606a;
    
    /* Brand Colors */
    --farghar-gold: #ae8226;
    --farghar-gold-rgb: 174, 130, 38;
    --farghar-gold-dark: #7c530b;
    --farghar-gold-light: #cca43e;
    
    /* Jatelgram specific defaults */
    --jatelgram-avatar-default-bg: #ae8226;
    
    /* ========== JATELGRAM SPACING VARIABLES (Unified Design System) ========== */
    /* Spacing scale */
    --jatelgram-spacing-xs: 4px;
    --jatelgram-spacing-sm: 8px;
    --jatelgram-spacing-md: 16px;
    --jatelgram-spacing-lg: 24px;
    --jatelgram-spacing-xl: 32px;
    --jatelgram-spacing-2xl: 40px;
    --jatelgram-spacing-3xl: 48px;
    
    /* Container max width */
    --jatelgram-container-max-width: 1200px;
    
    /* Sidebar widths (keeping existing variables for backward compatibility) */
    --sidebar-width-expanded: 320px;
    --sidebar-width-collapsed: 72px;
    --jatelgram-sidebar-width: var(--sidebar-width-expanded);
    --jatelgram-sidebar-collapsed-width: var(--sidebar-width-collapsed);
    
    /* Border radius */
    --jatelgram-border-radius: 12px;
    --jatelgram-border-radius-sm: 6px;
    --jatelgram-border-radius-lg: 16px;
    --jatelgram-border-radius-xl: 20px;
    --jatelgram-border-radius-circle: 50%;
    
    /* Legacy aliases for backward compatibility with Farghar Core */
    --farghar-space-xs: var(--jatelgram-spacing-xs);
    --farghar-space-sm: var(--jatelgram-spacing-sm);
    --farghar-space-md: var(--jatelgram-spacing-md);
    --farghar-space-lg: var(--jatelgram-spacing-lg);
    --farghar-space-xl: var(--jatelgram-spacing-xl);
    --farghar-radius-sm: var(--jatelgram-border-radius-sm);
    --farghar-radius-md: var(--jatelgram-border-radius);
    --farghar-radius-lg: var(--jatelgram-border-radius-lg);
    --farghar-radius-xl: var(--jatelgram-border-radius-xl);
    
    /* Shadows */
    --farghar-shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --farghar-shadow-md: 0 2px 6px rgba(0,0,0,0.08);
    --farghar-shadow-lg: 0 4px 12px rgba(0,0,0,0.12);
    
    /* Transitions */
    --farghar-transition-base: 0.2s ease-out;
    --farghar-transition-fast: 0.12s ease-out;
    --farghar-transition-slow: 0.3s ease-out;
    
    /* Sidebar transition */
    --sidebar-transition: all 0.25s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    --sidebar-resize-handle-width: 8px;
    
    /* Footer Navigation Variables (used in critical.css) */
    --footer-bg: var(--farghar-footer-bg);
    --footer-border: var(--farghar-footer-border);
    --footer-text: var(--farghar-text-primary);
    --footer-active-border: var(--farghar-gold);
    --footer-active-text: var(--farghar-gold);
}

/* ========== Dark Mode Overrides ========== */
body.dark {
    --farghar-footer-bg: #0d1117;
    --farghar-header-bg: #0d1117;
    --farghar-footer-border: #30363d;
    --farghar-header-border: #30363d;
    --farghar-text-primary: #e6edf3;
    --farghar-text-secondary: #8b949e;
    --farghar-shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
    --farghar-shadow-md: 0 2px 6px rgba(0,0,0,0.5);
    --farghar-shadow-lg: 0 4px 12px rgba(0,0,0,0.6);
    
    /* Footer dark mode */
    --footer-bg: var(--farghar-footer-bg);
    --footer-border: var(--farghar-footer-border);
    --footer-text: var(--farghar-text-primary);
    --footer-active-border: var(--farghar-gold-light);
    --footer-active-text: var(--farghar-gold-light);
    
    /* Keep avatar default background consistent in dark mode */
    --jatelgram-avatar-default-bg: #ae8226;
    
    /* Spacing variables remain unchanged in dark mode (no need to override) */
}