@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');

:root {
    /* Light theme variables */
    --bg-color: rgba(255, 255, 255, 0.1);
    --border-color: rgba(255, 255, 255, 0.3);
    --text-color: #000;
    --text-color-light: #666;
    --window-bg: rgba(255, 255, 255, 0.95);
    --menu-bg: rgba(255, 255, 255, 0.1);
    --icon-bg: linear-gradient(145deg, rgba(255,255,255,0.9), rgba(255,255,255,0.8));
    --hover-bg: rgba(0, 0, 0, 0.1);
    --active-bg: rgba(0, 0, 0, 0.2);
    --window-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    --icon-label-color: #000;
    --dock-separator-color: rgba(255, 255, 255, 0.3);
    --dock-bg: rgba(255, 255, 255, 0.1);
}

body {
    background-image: url('../images/ux-light.jpg');
    background-size: cover;
    background-position: center;
    color: var(--text-color);
}

/* Ensure all app windows use proper colors in light mode */
.window {
    background: var(--bg-color);
    border: 1px solid var(--border-color);
}

.window-header {
    color: var(--text-color);
}

/* Light mode specific adjustments */
.context-menu-item.active {
    background-color: rgba(0, 0, 0, 0.05);
}

/* Desktop icon label styles for light mode */
.icon-label {
    color: var(--icon-label-color);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.7);
}

/* Toast notification in light mode - ensure text is dark */
.notification {
    color: #000;
}

.notification .text-gray-600 {
    color: #666 !important;
}