/* ConsultClock Theme Variables */
/* Default light theme */
:root {
    /* Color System - Modern palette */
    --primary-50: #f8f9fa;
    --primary-100: #e9ecef;
    --primary-200: #dee2e6;
    --primary-300: #ced4da;
    --primary-400: #adb5bd;
    --primary-500: #6c757d;
    --primary-600: #495057;
    --primary-700: #343a40;
    --primary-800: #212529;
    --primary-900: #111418;
    
    --accent-50: #ecfdf5;
    --accent-100: #d1fae5;
    --accent-200: #a7f3d0;
    --accent-300: #6ee7b7;
    --accent-400: #34d399;
    --accent-500: #10b981;
    --accent-600: #059669;
    --accent-700: #047857;
    --accent-800: #065f46;
    --accent-900: #064e3b;
    
    --danger-50: #fef2f2;
    --danger-100: #fee2e2;
    --danger-200: #fecaca;
    --danger-300: #fca5a5;
    --danger-400: #f87171;
    --danger-500: #ef4444;
    --danger-600: #dc2626;
    --danger-700: #b91c1c;
    --danger-800: #991b1b;
    --danger-900: #7f1d1d;
    
    /* Semantic color mapping - for backward compatibility */
    --primary: var(--primary-800);
    --secondary: var(--accent-500);
    --accent: var(--danger-500);
    --light: var(--primary-50);
    --dark: var(--primary-900);
    --success: var(--accent-500);
    --danger: var(--danger-600);
    --grey: var(--primary-500);
    --light-grey: var(--primary-100);
    
    /* Typography - Updated for better readability */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    
    /* Line heights */
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
    
    /* Font weights */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* Spacing scale - consistent 4px grid */
    --space-0: 0;
    --space-1: 0.25rem;  /* 4px */
    --space-2: 0.5rem;   /* 8px */
    --space-3: 0.75rem;  /* 12px */
    --space-4: 1rem;     /* 16px */
    --space-5: 1.25rem;  /* 20px */
    --space-6: 1.5rem;   /* 24px */
    --space-8: 2rem;     /* 32px */
    --space-10: 2.5rem;  /* 40px */
    --space-12: 3rem;    /* 48px */
    --space-16: 4rem;    /* 64px */
    --space-20: 5rem;    /* 80px */
    --space-24: 6rem;    /* 96px */
    
    /* Backward compatibility */
    --spacing-xs: var(--space-2);
    --spacing-sm: var(--space-3);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-8);
    
    /* Borders - More options */
    --border-width-none: 0;
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;
    
    /* Border radius - More natural progression */
    --radius-none: 0;
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;
    
    /* Backward compatibility */
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    
    /* Enhanced shadow system */
    --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 -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    
    /* Transitions */
    --transition-fast: 150ms;
    --transition-normal: 300ms;
    --transition-slow: 500ms;
    
    /* Z-index scale */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-auto: auto;
}

/* Dark theme - based on prefers-color-scheme */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark theme color mapping */
        --primary-50: #111418;
        --primary-100: #212529;
        --primary-200: #343a40;
        --primary-300: #495057;
        --primary-400: #6c757d;
        --primary-500: #adb5bd;
        --primary-600: #ced4da;
        --primary-700: #dee2e6;
        --primary-800: #e9ecef;
        --primary-900: #f8f9fa;
        
        /* Keep accent colors but adjust for dark mode */
        --accent-50: #064e3b;
        --accent-100: #065f46;
        --accent-200: #047857;
        --accent-300: #059669;
        --accent-400: #10b981;
        --accent-500: #34d399;
        --accent-600: #6ee7b7;
        --accent-700: #a7f3d0;
        --accent-800: #d1fae5;
        --accent-900: #ecfdf5;
        
        /* Keep danger colors but adjust for dark mode */
        --danger-50: #7f1d1d;
        --danger-100: #991b1b;
        --danger-200: #b91c1c;
        --danger-300: #dc2626;
        --danger-400: #ef4444;
        --danger-500: #f87171;
        --danger-600: #fca5a5;
        --danger-700: #fecaca;
        --danger-800: #fee2e2;
        --danger-900: #fef2f2;
        
        /* Background and surface colors for dark mode */
        --surface-bg: #121212;
        --surface-1: #1e1e1e;
        --surface-2: #222222;
        --surface-3: #252525;
        --surface-4: #272727;
        --surface-5: #2c2c2c;
        --surface-6: #2e2e2e;
        
        /* Updated shadows for dark mode */
        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
        --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
        --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
        --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
    }
}

/* Manual theme class for JavaScript toggling */
.dark-theme {
    /* Dark theme color mapping */
    --primary-50: #111418;
    --primary-100: #212529;
    --primary-200: #343a40;
    --primary-300: #495057;
    --primary-400: #6c757d;
    --primary-500: #adb5bd;
    --primary-600: #ced4da;
    --primary-700: #dee2e6;
    --primary-800: #e9ecef;
    --primary-900: #f8f9fa;
    
    /* Keep accent colors but adjust for dark mode */
    --accent-50: #064e3b;
    --accent-100: #065f46;
    --accent-200: #047857;
    --accent-300: #059669;
    --accent-400: #10b981;
    --accent-500: #34d399;
    --accent-600: #6ee7b7;
    --accent-700: #a7f3d0;
    --accent-800: #d1fae5;
    --accent-900: #ecfdf5;
    
    /* Keep danger colors but adjust for dark mode */
    --danger-50: #7f1d1d;
    --danger-100: #991b1b;
    --danger-200: #b91c1c;
    --danger-300: #dc2626;
    --danger-400: #ef4444;
    --danger-500: #f87171;
    --danger-600: #fca5a5;
    --danger-700: #fecaca;
    --danger-800: #fee2e2;
    --danger-900: #fef2f2;
    
    /* Background and surface colors for dark mode */
    --surface-bg: #121212;
    --surface-1: #1e1e1e;
    --surface-2: #222222;
    --surface-3: #252525;
    --surface-4: #272727;
    --surface-5: #2c2c2c;
    --surface-6: #2e2e2e;
    
    /* Updated shadows for dark mode */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
}