/* ========================================
    CRITICAL CSS - PREVENTS WHITE FLASH
   ======================================== */

/* Define CSS variables first to prevent flash */
:root {
    /* Color Palette */
    --color-bg-dark: rgb(39, 43, 46);
    --color-bg-dark-rgb: 39, 43, 46;
    --color-accent-green: rgb(207, 222, 103);
    --color-accent-pink: rgb(210, 134, 189);
    --color-text-light: rgb(238, 233, 228);
    --color-bg-light: rgb(238, 233, 228);
    --color-bg-light-rgb: 238, 233, 228;
    --color-accent-blue: rgb(39, 43, 46);
    --color-text-dark: rgb(39, 43, 46);

    /* Semantic Color Mapping */
    --color-primary: var(--color-accent-green);
    /* dark mode primary */
    --color-secondary: var(--color-accent-pink);
    --color-background: var(--color-bg-dark);
    --color-text-primary: var(--color-text-light);
    --color-text-secondary: var(--color-text-dark);

    /* Border Colors */
    --border-color-primary: var(--color-accent-green);
    --border-color-secondary: var(--color-accent-pink);
}

/* Light theme override */
[data-theme="light"] {
    --color-background: var(--color-bg-light);
    --color-primary: var(--color-accent-pink);
    /* light mode primary */
    --color-secondary: var(--color-accent-green);
    --color-text-primary: var(--color-text-dark);
    --color-text-secondary: var(--color-text-light);
    --border-color-primary: var(--color-accent-pink);
    /* pink borders in light mode */
}

/* Apply styles using CSS variables */
html, body { 
    background-color: var(--color-background); 
    color: var(--color-text-primary);
    margin: 0 !important;
    padding: 0 !important;
}

/* Hide translatable content until language loads */
.translatable-content {
    opacity: 0 !important;
    transition: opacity 0.2s ease-in-out;
}

.translatable-content.loaded {
    opacity: 1 !important;
}

.hide-translatable .translatable-content {
    opacity: 0 !important;
}

/* Ensure loaded translations are visible even while hide-translatable is set */
.hide-translatable .translatable-content.loaded {
    opacity: 1 !important;
}

/* Hide loading screen when page is ready */
.page-loaded #loading-screen {
    opacity: 0;
    pointer-events: none;
}