/* === TAKEDROP AI - THEME SYSTEM === */
/* Comprehensive light/dark theme with CSS variables */

/* ============================================
   ROOT VARIABLES - DARK THEME (Default)
   ============================================ */
:root {
    /* Core backgrounds */
    --bg-body: #08080A;
    --bg-elevated: #0d0d12;
    --bg-card: #12121a;
    --bg-card-hover: #1a1a24;
    --bg-input: rgba(255, 255, 255, 0.03);
    --bg-input-hover: rgba(255, 255, 255, 0.06);
    
    /* Surface overlays */
    --bg-overlay-5: rgba(255, 255, 255, 0.02);
    --bg-overlay-10: rgba(255, 255, 255, 0.05);
    --bg-overlay-20: rgba(255, 255, 255, 0.08);
    --bg-overlay-30: rgba(255, 255, 255, 0.12);
    
    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);
    --border-accent: rgba(99, 102, 241, 0.3);
    
    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-disabled: #52525b;
    --text-inverse: #18181b;
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.15);
    
    /* Glass effect */
    --glass-bg: rgba(18, 18, 22, 0.8);
    --glass-border: rgba(255, 255, 255, 0.08);
    
    /* Dock */
    --dock-bg: rgba(18, 18, 24, 0.75);
    --dock-border: rgba(255, 255, 255, 0.08);
    --dock-text: #94a3b8;
    --dock-text-active: #ffffff;
    
    /* Header */
    --header-bg: rgba(18, 18, 22, 0.8);
    --header-border: rgba(99, 102, 241, 0.1);
    
    /* Grid pattern */
    --grid-color: rgba(255, 255, 255, 0.02);
    --grid-glow: rgba(99, 102, 241, 0.08);
    
    /* Scrollbar */
    --scrollbar-track: rgba(255, 255, 255, 0.02);
    --scrollbar-thumb: rgba(255, 255, 255, 0.1);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.2);
    
    /* Status colors (same in both themes) */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-success-border: rgba(16, 185, 129, 0.3);
    
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-warning-border: rgba(245, 158, 11, 0.3);
    
    --color-error: #ef4444;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    --color-error-border: rgba(239, 68, 68, 0.3);
    
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.1);
    --color-info-border: rgba(59, 130, 246, 0.3);
    
    /* Accent colors */
    --accent-primary: #6366f1;
    --accent-primary-hover: #818cf8;
    --accent-secondary: #8b5cf6;
    
    /* Theme transition */
    --theme-transition: 0.3s ease;
}

/* ============================================
   LIGHT THEME OVERRIDES
   ============================================ */
[data-theme="light"] {
    /* Core backgrounds */
    --bg-body: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f1f5f9;
    --bg-input: rgba(0, 0, 0, 0.03);
    --bg-input-hover: rgba(0, 0, 0, 0.05);
    
    /* Surface overlays */
    --bg-overlay-5: rgba(0, 0, 0, 0.02);
    --bg-overlay-10: rgba(0, 0, 0, 0.04);
    --bg-overlay-20: rgba(0, 0, 0, 0.06);
    --bg-overlay-30: rgba(0, 0, 0, 0.08);
    
    /* Borders */
    --border-subtle: rgba(0, 0, 0, 0.05);
    --border-default: rgba(0, 0, 0, 0.08);
    --border-strong: rgba(0, 0, 0, 0.12);
    --border-accent: rgba(99, 102, 241, 0.3);
    
    /* Text colors */
    --text-primary: #18181b;
    --text-secondary: #52525b;
    --text-muted: #71717a;
    --text-disabled: #a1a1aa;
    --text-inverse: #ffffff;
    
    /* Shadows - softer for light theme */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.1);
    
    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(0, 0, 0, 0.06);
    
    /* Dock */
    --dock-bg: rgba(255, 255, 255, 0.9);
    --dock-border: rgba(0, 0, 0, 0.08);
    --dock-text: #64748b;
    --dock-text-active: #1e293b;
    
    /* Header */
    --header-bg: rgba(255, 255, 255, 0.85);
    --header-border: rgba(99, 102, 241, 0.15);
    
    /* Grid pattern */
    --grid-color: rgba(0, 0, 0, 0.03);
    --grid-glow: rgba(99, 102, 241, 0.05);
    
    /* Scrollbar */
    --scrollbar-track: rgba(0, 0, 0, 0.02);
    --scrollbar-thumb: rgba(0, 0, 0, 0.1);
    --scrollbar-thumb-hover: rgba(0, 0, 0, 0.2);
    
    /* Status colors - slightly adjusted for light bg */
    --color-success-bg: rgba(16, 185, 129, 0.08);
    --color-warning-bg: rgba(245, 158, 11, 0.08);
    --color-error-bg: rgba(239, 68, 68, 0.08);
    --color-info-bg: rgba(59, 130, 246, 0.08);
}

/* ============================================
   GLOBAL TRANSITION FOR THEME SWITCHING
   ============================================ */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: 
        background-color var(--theme-transition),
        border-color var(--theme-transition),
        color var(--theme-transition),
        box-shadow var(--theme-transition),
        opacity var(--theme-transition) !important;
}

/* ============================================
   BASE ELEMENT STYLES USING VARIABLES
   ============================================ */

/* Body */
body {
    background-color: var(--bg-body);
    color: var(--text-primary);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* ============================================
   BENTO CARD - THEMED
   ============================================ */
.bento-card {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}
.bento-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

/* Light theme specific card adjustments */
[data-theme="light"] .bento-card {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}
[data-theme="light"] .bento-card:hover {
    box-shadow: var(--shadow-md);
}

/* ============================================
   ISLAND HEADER - THEMED
   ============================================ */
.island-header {
    background: var(--header-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--header-border);
    box-shadow: var(--shadow-lg);
}

[data-theme="light"] .island-header::after {
    background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0));
}

/* ============================================
   DOCK - THEMED
   ============================================ */
.dock-bar {
    background: var(--dock-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--dock-border);
    box-shadow: var(--shadow-lg);
}

.dock-btn {
    color: var(--dock-text);
}
.dock-btn:hover {
    color: var(--dock-text-active);
    background: var(--bg-overlay-10);
}
.dock-btn.active {
    color: var(--dock-text-active);
}

[data-theme="light"] .dock-bar::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
}

/* ============================================
   STORE PILL - THEMED
   ============================================ */
.store-pill {
    background: var(--bg-overlay-5);
    border: 1px solid var(--border-subtle);
}
.store-pill:hover {
    background: var(--bg-overlay-20);
    border-color: var(--border-strong);
}

/* ============================================
   INPUTS & FORM ELEMENTS - THEMED
   ============================================ */
input, textarea, select {
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}
input:hover, textarea:hover, select:hover {
    background: var(--bg-input-hover);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--accent-primary);
    outline: none;
}
input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg-overlay-5);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    background: var(--bg-overlay-20);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: all 0.3s ease;
}

/* Dark theme: show sun (to switch to light), hide moon */
.theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}
.theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* Light theme: show moon (to switch to dark), hide sun */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}
[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* ============================================
   TEXT UTILITIES - THEMED
   ============================================ */
.text-themed {
    color: var(--text-primary);
}
.text-themed-secondary {
    color: var(--text-secondary);
}
.text-themed-muted {
    color: var(--text-muted);
}

/* ============================================
   BACKGROUND UTILITIES - THEMED
   ============================================ */
.bg-themed-card {
    background: var(--bg-card);
}
.bg-themed-elevated {
    background: var(--bg-elevated);
}
.bg-themed-overlay {
    background: var(--bg-overlay-10);
}

/* ============================================
   BORDER UTILITIES - THEMED
   ============================================ */
.border-themed {
    border-color: var(--border-default);
}
.border-themed-subtle {
    border-color: var(--border-subtle);
}

/* ============================================
   LIGHT THEME SPECIFIC OVERRIDES
   ============================================ */

/* Tailwind dark: classes need override in light mode */
[data-theme="light"] .dark\:text-white,
[data-theme="light"] .text-white {
    color: var(--text-primary);
}

[data-theme="light"] .dark\:text-gray-400,
[data-theme="light"] .text-gray-400 {
    color: var(--text-secondary);
}

[data-theme="light"] .dark\:text-gray-500,
[data-theme="light"] .text-gray-500 {
    color: var(--text-muted);
}

[data-theme="light"] .dark\:text-gray-600,
[data-theme="light"] .text-gray-600 {
    color: var(--text-disabled);
}

/* Background overrides for light theme */
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .dark\:bg-white\/5 {
    background-color: var(--bg-overlay-5);
}

[data-theme="light"] .bg-white\/10,
[data-theme="light"] .dark\:bg-white\/10 {
    background-color: var(--bg-overlay-10);
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .dark\:border-white\/10 {
    border-color: var(--border-default);
}

[data-theme="light"] .border-white\/5,
[data-theme="light"] .dark\:border-white\/5 {
    border-color: var(--border-subtle);
}

/* Glass panels in light mode */
[data-theme="light"] .bg-\[\#1a1a24\],
[data-theme="light"] .bg-\[\#12121a\],
[data-theme="light"] .bg-\[\#0d0d12\] {
    background-color: var(--bg-card);
}

/* Grid background for light theme */
[data-theme="light"] body {
    background-image: 
        radial-gradient(circle at 50% 0%, var(--grid-glow) 0%, transparent 50%),
        linear-gradient(to right, var(--grid-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-color) 1px, transparent 1px);
}

/* Hover lift effect - adjusted shadows */
[data-theme="light"] .hover-lift:hover {
    box-shadow: var(--shadow-md);
}

/* Toast in light mode */
[data-theme="light"] #toast {
    box-shadow: var(--shadow-lg);
}

/* Agent AI button glow - softer in light mode */
[data-theme="light"] .agent-ai-btn {
    box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
}
[data-theme="light"] .agent-ai-btn:hover {
    box-shadow: 0 6px 28px rgba(99, 102, 241, 0.3);
}

/* Modal backdrop */
[data-theme="light"] .modal-backdrop,
[data-theme="light"] [class*="bg-black/"] {
    background-color: rgba(0, 0, 0, 0.4);
}

/* Code/mono text */
[data-theme="light"] code,
[data-theme="light"] .font-mono {
    background: var(--bg-overlay-10);
    color: var(--text-primary);
}

/* Selection color */
[data-theme="light"] ::selection {
    background: rgba(99, 102, 241, 0.2);
    color: var(--text-primary);
}