/* Dark Theme Variables */
:root {
    /* Primary Accent (The Action Color) */
    --primary-color: #0d9488; /* Modern Teal */
    --primary-dark: #0f766e; 
    --primary-glow: rgba(13, 148, 136, 0.4);
    
    /* Secondary Accent (The Depth Color) */
    --secondary-color: #6366f1; /* Indigo */
    --secondary-glow: rgba(99, 102, 241, 0.3);

    /* Creative Gradients */
    --brand-gradient: linear-gradient(135deg, #0d9488, #6366f1);
    --surface-gradient: linear-gradient(135deg, rgba(30, 41, 59, 0.4), rgba(15, 23, 42, 0.1));
    --hero-bg-gradient: radial-gradient(circle at 30% 30%, rgba(99, 102, 241, 0.15), transparent 50%),
                         radial-gradient(circle at 70% 70%, rgba(13, 148, 136, 0.15), transparent 50%);

    /* Structural Neutrals */
    --main-background: #05070a; /* True Midnight */
    --card-background: #0f172a; /* Slate 900 */
    --glass-background: rgba(30, 41, 59, 0.4);
    --glass-bg-mobile-menu: rgba(5, 7, 10, 0.98);
    
    /* Text & Content */
    --dark-text: #94a3b8; /* Slate 400 */
    --light-text: #f8fafc; /* Slate 50 */
    --light-gray: #475569; /* Slate 600 */
    --grid-gray: rgba(148, 163, 184, 0.05);

    /* Rings And Line Colors */
    --rings-1: rgba(13, 148, 136, 0.3);
    --rings-2: rgba(99, 102, 241, 0.2);
    --glowing-line: linear-gradient(90deg, #0d9488, #6366f1);

    /* Rim Lights & Borders */
    --rim-light: 1px solid rgba(255, 255, 255, 0.08);
    --border-accent: 1px solid rgba(13, 148, 136, 0.2);
    --border-general: 1px solid rgba(148, 163, 184, 0.1);
    --gradient-background: linear-gradient(135deg, rgba(30, 41, 59, 0.7), rgba(15, 23, 42, 0.4));
    
    /* Control Buttons */
    --controls-btn-background: rgba(15, 23, 42, 0.6);
    --controls-btn-background-hover: var(--primary-color);
}

/* Light Theme Variables */
[data-theme='light'] {
    /* Primary Accent (The Action Color) */
    --primary-color: #0d9488; /* Keeping the same Teal for brand consistency */
    --primary-dark: #0f766e; 
    --primary-glow: rgba(13, 148, 136, 0.2);
    
    /* Secondary Accent (The Depth Color) */
    --secondary-color: #4f46e5; /* Indigo 600 - better for light backgrounds */
    --secondary-glow: rgba(79, 70, 229, 0.15);

    /* Creative Gradients */
    --brand-gradient: linear-gradient(135deg, #0d9488, #4f46e5);
    --surface-gradient: linear-gradient(135deg, #ffffff, #f1f5f9);
    --hero-bg-gradient: radial-gradient(circle at 30% 30%, rgba(79, 70, 229, 0.08), transparent 60%),
                         radial-gradient(circle at 70% 70%, rgba(13, 148, 136, 0.08), transparent 60%);
    --gradient-background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(241, 245, 249, 0.7));

    /* Structural Neutrals */
    --main-background: #f8fafc; /* Slate 50 */
    --card-background: #ffffff;
    --glass-background: rgba(255, 255, 255, 0.8);
    --glass-bg-mobile-menu: rgba(255, 255, 255, 0.98);
    --inner-details-background: #f1f5f9;
    --project-tags-background: #e2e8f0;
    
    /* Text & Content */
    --dark-text: #475569; /* Slate 600 */
    --light-text: #1e293b; /* Slate 900 */
    --light-gray: #94a3b8; /* Slate 400 */
    --grid-gray: rgba(0, 0, 0, 0.03);

    /* Rings And Line Colors */
    --rings-1: rgba(13, 148, 136, 0.15);
    --rings-2: rgba(79, 70, 229, 0.1);
    --glowing-line: linear-gradient(90deg, #0d9488, #4f46e5);

    /* Rim Lights & Borders */
    --rim-light: 1px solid rgba(0, 0, 0, 0.05);
    --border-accent: 1px solid rgba(13, 148, 136, 0.15);
    --border-general: 1px solid rgba(0, 0, 0, 0.08);

    /* Control Buttons */
    --controls-btn-background: rgba(255, 255, 255, 0.8);
    --controls-btn-background-hover: var(--primary-color);
}