/**
 * MarktLinse Design System - Light Theme
 * Version: 1.0.0
 *
 * Default theme for the MarktLinse application.
 * Based on Apple-inspired design with Glassmorphism effects.
 */

[data-theme="light"],
:root {
    /* ============================================
     * BACKGROUND COLORS
     * ============================================ */
    --bg-primary: var(--color-white);
    --bg-secondary: #f5f5f7;
    --bg-tertiary: var(--gray-100);
    --bg-inverse: var(--gray-800);

    /* Surface Colors (for cards, modals, etc.) */
    --surface-primary: var(--color-white);
    --surface-secondary: var(--gray-50);
    --surface-elevated: var(--color-white);

    /* ============================================
     * TEXT COLORS
     * ============================================ */
    --text-primary: var(--gray-800);
    --text-secondary: var(--gray-600);
    --text-tertiary: var(--gray-500);
    --text-muted: var(--gray-400);
    --text-inverse: var(--color-white);
    --text-link: var(--color-primary);
    --text-link-hover: var(--color-primary-dark);

    /* ============================================
     * BORDER COLORS
     * ============================================ */
    --border-primary: var(--gray-200);
    --border-secondary: var(--gray-300);
    --border-focus: var(--color-primary);
    --border-error: var(--color-danger);

    /* ============================================
     * GLASSMORPHISM (Light Mode)
     * ============================================ */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-bg-hover: rgba(255, 255, 255, 0.98);
    --glass-border: 1px solid rgba(0, 0, 0, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

    /* ============================================
     * COMPONENT COLORS
     * ============================================ */

    /* Buttons - Primary */
    --button-primary-bg: var(--gradient-primary);
    --button-primary-bg-hover: var(--gradient-primary-hover);
    --button-primary-text: var(--color-white);
    --button-primary-shadow: var(--shadow-primary);

    /* Buttons - Secondary */
    --button-secondary-bg: var(--color-white);
    --button-secondary-bg-hover: var(--gray-50);
    --button-secondary-text: var(--color-primary);
    --button-secondary-border: 1px solid var(--color-primary);

    /* Buttons - Ghost */
    --button-ghost-bg: transparent;
    --button-ghost-bg-hover: rgba(0, 119, 182, 0.08);
    --button-ghost-text: var(--color-primary);

    /* Buttons - Danger */
    --button-danger-bg: var(--color-danger);
    --button-danger-bg-hover: var(--color-danger-dark);
    --button-danger-text: var(--color-white);

    /* Inputs */
    --input-bg: var(--color-white);
    --input-bg-disabled: var(--gray-100);
    --input-text: var(--text-primary);
    --input-placeholder: var(--gray-400);
    --input-border: var(--gray-300);
    --input-border-hover: var(--gray-400);
    --input-border-focus: var(--color-primary);
    --input-border-error: var(--color-danger);

    /* Cards */
    --card-bg: var(--color-white);
    --card-border: var(--glass-border);
    --card-shadow: var(--shadow-md);
    --card-shadow-hover: var(--shadow-lg);

    /* Modal */
    --modal-bg: var(--color-white);
    --modal-backdrop: rgba(0, 0, 0, 0.15);
    --modal-shadow: var(--shadow-2xl);

    /* Toast */
    --toast-bg: var(--color-white);
    --toast-border: var(--glass-border);
    --toast-shadow: var(--shadow-lg);

    /* Toast Variants */
    --toast-success-bg: var(--color-success-light);
    --toast-success-border: var(--color-success);
    --toast-success-text: var(--color-success-dark);

    --toast-warning-bg: var(--color-warning-light);
    --toast-warning-border: var(--color-warning);
    --toast-warning-text: var(--color-warning-dark);

    --toast-danger-bg: var(--color-danger-light);
    --toast-danger-border: var(--color-danger);
    --toast-danger-text: var(--color-danger-dark);

    --toast-info-bg: var(--color-info-light);
    --toast-info-border: var(--color-info);
    --toast-info-text: var(--color-info-dark);

    /* Avatar */
    --avatar-bg: var(--gradient-primary);

    /* Dropdown */
    --dropdown-bg: var(--glass-bg);

    /* Filter */
    --filter-bg: var(--color-white);

    /* Chip */
    --chip-bg: var(--primary-alpha-10);
    --chip-border: var(--primary-alpha-20);
    --chip-text: var(--color-primary);
    --chip-bg-hover: var(--primary-alpha-15);

    /* Skeleton */
    --skeleton-bg: var(--bg-tertiary);
    --skeleton-highlight: var(--overlay-white-80);

    /* Icon */
    --icon-color: var(--text-tertiary);
    --icon-color-hover: var(--text-secondary);
    --icon-color-active: var(--color-primary);

    /* Table */
    --table-header-bg: var(--bg-tertiary);
    --table-row-hover: var(--hover-bg);
    --table-border: var(--border-primary);
    --table-alt-row-bg: var(--bg-secondary);

    /* Interactive States */
    --hover-bg: var(--gray-50);
    --active-bg: rgba(0, 119, 182, 0.08);

    /* ============================================
     * SCROLLBAR (Light Mode)
     * ============================================ */
    --scrollbar-track: var(--gray-100);
    --scrollbar-thumb: var(--gray-300);
    --scrollbar-thumb-hover: var(--gray-400);

    /* ============================================
     * SELECTION
     * ============================================ */
    --selection-bg: rgba(0, 119, 182, 0.2);
    --selection-text: var(--text-primary);

    /* ============================================
     * FOCUS RING
     * ============================================ */
    --focus-ring-color: rgba(0, 119, 182, 0.4);
    --focus-ring-offset: 2px;
    --focus-ring-width: 3px;

    /* ============================================
     * DIVIDERS
     * ============================================ */
    --divider-color: var(--gray-200);
    --divider-color-subtle: var(--gray-100);

    /* ============================================
     * OVERLAY — Alpha Scale (Light Mode)
     * ============================================ */
    --overlay-light: rgba(255, 255, 255, 0.6);
    --overlay-dark: rgba(0, 0, 0, 0.5);

    /* Black Overlay Scale */
    --overlay-2: rgba(0, 0, 0, 0.02);
    --overlay-4: rgba(0, 0, 0, 0.04);
    --overlay-5: rgba(0, 0, 0, 0.05);
    --overlay-6: rgba(0, 0, 0, 0.06);
    --overlay-8: rgba(0, 0, 0, 0.08);
    --overlay-10: rgba(0, 0, 0, 0.1);
    --overlay-12: rgba(0, 0, 0, 0.12);
    --overlay-15: rgba(0, 0, 0, 0.15);
    --overlay-20: rgba(0, 0, 0, 0.20);
    --overlay-30: rgba(0, 0, 0, 0.30);
    --overlay-35: rgba(0, 0, 0, 0.35);
    --overlay-45: rgba(0, 0, 0, 0.45);
    --overlay-55: rgba(0, 0, 0, 0.55);
    --overlay-60: rgba(0, 0, 0, 0.60);
    --overlay-65: rgba(0, 0, 0, 0.65);
    --overlay-70: rgba(0, 0, 0, 0.70);

    /* Primary Color Alpha Scale */
    --primary-alpha-2: rgba(0, 119, 182, 0.02);
    --primary-alpha-4: rgba(0, 119, 182, 0.04);
    --primary-alpha-6: rgba(0, 119, 182, 0.06);
    --primary-alpha-8: rgba(0, 119, 182, 0.08);
    --primary-alpha-10: rgba(0, 119, 182, 0.1);
    --primary-alpha-12: rgba(0, 119, 182, 0.12);
    --primary-alpha-15: rgba(0, 119, 182, 0.15);
    --primary-alpha-20: rgba(0, 119, 182, 0.2);
    --primary-alpha-30: rgba(0, 119, 182, 0.3);
    --primary-alpha-40: rgba(0, 119, 182, 0.4);

    /* Status Color Alpha Variants */
    --success-alpha-4: rgba(16, 185, 129, 0.04);
    --success-alpha-6: rgba(16, 185, 129, 0.06);
    --success-alpha-8: rgba(16, 185, 129, 0.08);
    --success-alpha-10: rgba(16, 185, 129, 0.1);
    --success-alpha-15: rgba(16, 185, 129, 0.15);
    --success-alpha-12: rgba(16, 185, 129, 0.12);
    --success-alpha-20: rgba(16, 185, 129, 0.2);
    --success-alpha-25: rgba(16, 185, 129, 0.25);
    --success-alpha-30: rgba(16, 185, 129, 0.30);
    --success-alpha-40: rgba(16, 185, 129, 0.40);

    --danger-alpha-6: rgba(239, 68, 68, 0.06);
    --danger-alpha-8: rgba(239, 68, 68, 0.08);
    --danger-alpha-10: rgba(239, 68, 68, 0.1);
    --danger-alpha-15: rgba(239, 68, 68, 0.15);
    --danger-alpha-20: rgba(239, 68, 68, 0.2);
    --danger-alpha-30: rgba(239, 68, 68, 0.30);
    --danger-alpha-40: rgba(239, 68, 68, 0.40);
    --danger-alpha-50: rgba(239, 68, 68, 0.50);

    --warning-alpha-4: rgba(245, 158, 11, 0.04);
    --warning-alpha-5: rgba(245, 158, 11, 0.05);
    --warning-alpha-8: rgba(245, 158, 11, 0.08);
    --warning-alpha-10: rgba(245, 158, 11, 0.1);
    --warning-alpha-12: rgba(245, 158, 11, 0.12);
    --warning-alpha-15: rgba(245, 158, 11, 0.15);
    --warning-alpha-20: rgba(245, 158, 11, 0.20);
    --warning-alpha-25: rgba(245, 158, 11, 0.25);
    --warning-alpha-40: rgba(245, 158, 11, 0.40);

    --purple-alpha-6: rgba(139, 92, 246, 0.06);
    --purple-alpha-8: rgba(139, 92, 246, 0.08);
    --purple-alpha-10: rgba(139, 92, 246, 0.1);
    --purple-alpha-15: rgba(139, 92, 246, 0.15);
    --purple-alpha-20: rgba(139, 92, 246, 0.20);

    /* Info Color Alpha Scale */
    --info-alpha-4: rgba(59, 130, 246, 0.04);
    --info-alpha-6: rgba(59, 130, 246, 0.06);
    --info-alpha-8: rgba(59, 130, 246, 0.08);
    --info-alpha-10: rgba(59, 130, 246, 0.10);
    --info-alpha-12: rgba(59, 130, 246, 0.12);
    --info-alpha-15: rgba(59, 130, 246, 0.15);
    --info-alpha-20: rgba(59, 130, 246, 0.20);

    /* White Overlay Scale (for glass effects, dark-mode borders) */
    --overlay-white-8: rgba(255, 255, 255, 0.08);
    --overlay-white-10: rgba(255, 255, 255, 0.1);
    --overlay-white-18: rgba(255, 255, 255, 0.18);
    --overlay-white-20: rgba(255, 255, 255, 0.2);
    --overlay-white-30: rgba(255, 255, 255, 0.3);
    --overlay-white-40: rgba(255, 255, 255, 0.4);
    --overlay-white-45: rgba(255, 255, 255, 0.45);
    --overlay-white-50: rgba(255, 255, 255, 0.50);
    --overlay-white-80: rgba(255, 255, 255, 0.80);

    /* Annotation (Sticky-Note Highlight) */
    --annotation-bg: rgba(255, 255, 200, 0.85);

    /* ============================================
     * STATUS COLORS
     * ============================================ */
    --status-online: var(--color-success);
    --status-offline: var(--gray-400);
    --status-busy: var(--color-danger);
    --status-away: var(--color-warning);
}

/* ============================================
 * GLOBAL STYLES FOR LIGHT THEME
 * ============================================ */

[data-theme="light"] {
    color-scheme: light;
}

[data-theme="light"] body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Selection Styling */
[data-theme="light"] ::selection {
    background-color: var(--selection-bg);
    color: var(--selection-text);
}

/* Scrollbar Styling (WebKit) */
[data-theme="light"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: var(--radius-full);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: var(--radius-full);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Focus Ring Utility */
[data-theme="light"] .focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 var(--focus-ring-offset) var(--bg-primary),
                0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
}

/* Glassmorphic Surface */
[data-theme="light"] .glass {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow);
}

[data-theme="light"] .glass:hover {
    background: var(--glass-bg-hover);
}