/* Theme variables */
:root {
    --bg-color: #000000;
    --text-color: #D1D5DB;
    --text-color-muted: #9CA3AF;
    --text-color-heading: #FFFFFF;
    --card-bg: rgba(10, 10, 10, 0.4);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-placeholder-bg: rgba(0,0,0,0.2); /* Default dark placeholder */
    --card-placeholder-border: rgba(255,255,255,0.05);
    --nav-bg: rgba(10, 10, 10, 0.5);
    --nav-border: rgba(255, 255, 255, 0.08);
    --nav-text-muted: #9CA3AF;
    --nav-text-hover: #FFFFFF;
    --nav-kbd-bg: rgba(255, 255, 255, 0.06);
    --nav-kbd-border: rgba(255,255,255,0.1);
    --button-primary-bg: rgba(0, 191, 255, 0.15);
    --button-primary-border: rgba(0, 191, 255, 0.5);
    --button-primary-text: #38BDF8;
    --button-primary-hover-bg: rgba(0, 191, 255, 0.3);
    --button-primary-hover-text: #FFFFFF;
    --accent-color: #00BFFF; 
    --line-color: #003050; 
    --three-canvas-opacity: 1;
    --static-bg-opacity: 0; 
    --static-bg-tint-opacity: 0; 
    --palette-bg: #08080D;
    --palette-border: rgba(255, 255, 255, 0.1);
    --palette-item-hover-bg: rgba(0, 191, 255, 0.1);
    --palette-item-hover-text: #7DD3FC;

    /* Chart specific variables */
    --text-color-tertiary: rgba(209, 213, 219, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body.theme-animated-dark {
    --three-canvas-opacity: 1;
    --static-bg-opacity: 0;
    --static-bg-tint-opacity: 0;
    --accent-color: #00BFFF;
    --line-color: #003050;
    --bg-color: #000000;
    --text-color: #D1D5DB;
    --text-color-muted: #9CA3AF;
    --text-color-heading: #FFFFFF;
    --card-bg: rgba(10, 10, 10, 0.4);
    --card-border: rgba(255, 255, 255, 0.08);
    --card-placeholder-bg: rgba(0,0,0,0.2); 
    --card-placeholder-border: rgba(255,255,255,0.05);
    --nav-bg: rgba(10, 10, 10, 0.5);
    --nav-border: rgba(255, 255, 255, 0.08);

    /* Chart specific variables */
    --text-color-tertiary: rgba(209, 213, 219, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body.theme-animated-light {
    --bg-color: #FFFFFF; 
    --text-color: #374151; 
    --text-color-muted: #6B7280; 
    --text-color-heading: #111827; 
    --card-bg: rgba(249, 250, 251, 0.9); 
    --card-border: rgba(0, 0, 0, 0.05); 
    --card-placeholder-bg: #F3F4F6; 
    --card-placeholder-border: #E5E7EB; 
    --nav-bg: rgba(255, 255, 255, 0.85); 
    --nav-border: rgba(0, 0, 0, 0.07);
    --nav-text-muted: #4B5563; 
    --nav-text-hover: #111827; 
    --nav-kbd-bg: rgba(0, 0, 0, 0.04);
    --nav-kbd-border: rgba(0,0,0,0.07);
    --button-primary-bg: #007AFF; 
    --button-primary-border: #007AFF;
    --button-primary-text: #FFFFFF;
    --button-primary-hover-bg: #0056b3; 
    --button-primary-hover-text: #FFFFFF;
    --accent-color: #4A90E2; /* Adjusted: Dots color for light theme - slightly darker blue */
    --line-color: #6B7280; /* Adjusted: Lines color for light theme (Tailwind gray-500) */
    --three-canvas-opacity: 1; 
    --static-bg-opacity: 0;
    --static-bg-tint-opacity: 0;
    --palette-bg: #FFFFFF;
    --palette-border: rgba(0, 0, 0, 0.08);
    --palette-item-hover-bg: rgba(0, 122, 255, 0.08); 
    --palette-item-hover-text: #0056b3; 

    /* Chart specific variables */
    --text-color-tertiary: rgba(55, 65, 81, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.1);
}

body.theme-ghibli-dark { 
    --bg-color: #08080D; 
    --text-color: #A0AEC0; 
    --text-color-muted: #CBD5E0; 
    --text-color-heading: #E2E8F0; 
    --card-bg: rgba(12, 12, 16, 0.75); 
    --card-border: rgba(255, 255, 255, 0.07);
    --card-placeholder-bg: rgba(255,255,255,0.03); 
    --card-placeholder-border: rgba(255,255,255,0.06);
    --nav-bg: rgba(12, 12, 16, 0.85);
    --nav-border: rgba(255, 255, 255, 0.07);
    --three-canvas-opacity: 0; 
    --static-bg-opacity: 1; 
    --static-bg-tint-opacity: 0.4; 
    --palette-bg: #050507;
    --button-primary-bg: rgba(0, 191, 255, 0.1); 
    --button-primary-border: rgba(0, 191, 255, 0.4);
    --button-primary-text: #7DD3FC; 
    --button-primary-hover-bg: rgba(0, 191, 255, 0.2);
    --button-primary-hover-text: #E5E7EB;

    /* Chart specific variables */
    --text-color-tertiary: rgba(160, 174, 192, 0.5);
    --shadow-color: rgba(0, 0, 0, 0.25);
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

#three-canvas-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; 
    opacity: var(--three-canvas-opacity);
    transition: opacity 0.5s ease-in-out;
}
#static-background-image-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; 
    background-image: url('https://prateekkeshari.com/static/media/ghibli.405472488e5fa3e27805.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: var(--static-bg-opacity);
    transition: opacity 0.5s ease-in-out;
}
#static-background-image-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, var(--static-bg-tint-opacity));
    z-index: 0; 
    transition: background-color 0.5s ease-in-out;
}

canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Add utility classes for text colors */
.text-muted {
    color: var(--text-color-muted);
}

/* Add utility classes for backgrounds */
.bg-card {
    background-color: var(--card-bg);
}