:root {
    /* Base Colors - Black and Gray */
    --bg-main-light: #fafafa;
    --bg-main-dark: #080808;
    
    --text-primary-light: #171717;
    --text-secondary-light: #525252;
    
    --text-primary-dark: #ededed;
    --text-secondary-dark: #a1a1aa;

    /* Accents from girdharithakur.in */
    --gradient-orange: linear-gradient(90deg, #ff6400, #ffac1b, #ff6400);
    --gradient-purple: linear-gradient(135deg, #6b1bff, #2b00ff, #6b1bff);
    
    --accent-orange: #ff6400;
    --accent-purple: #6b1bff;
    --accent-green: #22c55e;

    /* Shadows */
    --shadow-sm-light: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --shadow-md-light: 0 4px 12px rgba(0,0,0,0.08);
    
    --shadow-sm-dark: 0 1px 3px rgba(0,0,0,0.4);
    --shadow-md-dark: 0 4px 20px rgba(0,0,0,0.5);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-medium: 0.3s ease;
}

[data-theme="dark"] {
    --bg-main: var(--bg-main-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    
    /* PRIMARY COLOR (was missing — caused invisible focus rings!) */
    --primary-color: var(--accent-orange);
    
    /* Glass values */
    --glass-bg: rgba(22, 22, 22, 0.7);
    --glass-border: rgba(255, 255, 255, 0.08);
    --card-hover-bg: rgba(30, 30, 30, 0.85);
    --input-bg: rgba(15, 15, 15, 0.8);

    /* Card glass for home page */
    --card-glass-bg: linear-gradient(135deg, rgba(38, 38, 38, 0.72), rgba(14, 14, 14, 0.5));
    --card-glass-bg-hover: linear-gradient(135deg, rgba(50, 50, 50, 0.85), rgba(22, 22, 22, 0.65));

    --border-color: rgba(255, 255, 255, 0.08);
    --bg-canvas: #0a0a0a;
    
    --shadow-sm: var(--shadow-sm-dark);
    --shadow-md: var(--shadow-md-dark);

    /* UI State Colors */
    --element-bg: rgba(38, 38, 38, 0.6);
    --element-border: rgba(255, 255, 255, 0.1);
    --element-text: #ffffff;
    
    --element-highlight: #ff6400;
    --element-highlight-border: #ffac1b;
    --element-highlight-text: #ffffff;
    
    --element-success: #22c55e;
    --element-success-border: #16a34a;
    
    --element-error: #ef4444;
    --element-error-border: #dc2626;
}

[data-theme="light"] {
    --bg-main: var(--bg-main-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    
    /* PRIMARY COLOR */
    --primary-color: var(--accent-orange);
    
    /* Glass values for light */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.08);
    --card-hover-bg: #f5f5f5;
    --input-bg: #ffffff;

    /* Card glass for home page (light-mode friendly) */
    --card-glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(245, 245, 245, 0.7));
    --card-glass-bg-hover: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(250, 250, 250, 0.9));

    --border-color: #e5e5e5;
    --bg-canvas: #ffffff;
    
    --shadow-sm: var(--shadow-sm-light);
    --shadow-md: var(--shadow-md-light);

    /* UI State Colors */
    --element-bg: #f5f5f5;
    --element-border: #d4d4d4;
    --element-text: #171717;
    
    --element-highlight: #ff6400;
    --element-highlight-border: #ffac1b;
    --element-highlight-text: #ffffff;
    
    --element-success: #22c55e;
    --element-success-border: #16a34a;
    
    --element-error: #ef4444;
    --element-error-border: #dc2626;
}

/* Smooth theme transitions */
*, *::before, *::after {
    transition: background-color var(--transition-fast), 
                border-color var(--transition-fast), 
                color var(--transition-fast);
}