/* ========================================
   EASYKAWA DESIGN SYSTEM - THEME TOKENS
   Version: 1.0.0
   ======================================== */

/* === СВЕТЛАЯ ТЕМА (по умолчанию) === */
:root {
    /* === Brand Colors === */
    --brand-primary: #4f46e5;
    --brand-primary-hover: #4338ca;
    --brand-primary-light: #6366f1;
    --brand-primary-dark: #3730a3;
    --brand-secondary: #4338ca;
    --focus-ring: rgba(79, 70, 229, 0.15);

    /* === LEGACY VARIABLES MAPPING === */
    /* Mapping old variable names to new theme system for backward compatibility */
    --primary-color: var(--brand-primary);
    --primary-hover: var(--brand-primary-hover);
    --light-gray-bg: var(--bg-primary);
    --card-bg: var(--bg-secondary);
    --card-header-bg: #fdfdfe; /* Slightly off-white for card headers */
    --text-color: var(--text-primary);
    --label-color: var(--text-secondary);
    --border-color: var(--border-primary);
    --positive-diff: var(--color-success);
    --negative-diff: var(--color-error);

    /* === Backgrounds === */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --bg-tertiary-transparent: rgba(241, 245, 249, 0.5);
    --bg-hover: #e2e8f0;
    --bg-overlay: rgba(0, 0, 0, 0.6);

    /* === Text Colors === */
    --text-primary: #334155;
    --text-secondary: #64748b;
    --text-tertiary: #94a3b8;
    --text-inverse: #ffffff;
    --text-disabled: #cbd5e1;

    /* === Border & Dividers === */
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --border-hover: #94a3b8;
    --divider: #e2e8f0;

    /* === RGB Versions for rgba() usage === */
    --brand-primary-rgb: 79, 70, 229;
    --text-inverse-rgb: 255, 255, 255;
    --color-info-rgb: 59, 130, 246;
    --color-error-rgb: 239, 68, 68;
    --color-success-rgb: 16, 185, 129;
    --color-warning-rgb: 245, 158, 11;

    /* === Semantic Colors === */
    /* Success */
    --color-success: #10b981;
    --color-success-hover: #059669;
    --color-success-light: #d1fae5;
    --color-success-bg: #ecfdf5;

    /* Warning */
    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: #fef3c7;
    --color-warning-bg: #f3f4f6;

    /* Error */
    --color-error: #ef4444;
    --color-error-hover: #dc2626;
    --color-error-light: #fee2e2;
    --color-error-bg: #fef2f2;

    /* Info */
    --color-info: #3b82f6;
    --color-info-hover: #2563eb;
    --color-info-light: #dbeafe;
    --color-info-bg: #eff6ff;

    /* Lock (editing by another user) */
    --color-lock-bg: #fffbeb;

    /* Purple */
    --color-purple: #9333ea;
    --color-purple-hover: #7e22ce;
    --color-purple-light: #e9d5ff;
    --color-purple-bg: #f3e8ff;

    /* === Tooltip === */
    --tooltip-bg: rgba(33, 33, 33, 0.95);
    --tooltip-text: #ffffff;
    --tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    --tooltip-border: transparent;

    /* === Shadows === */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* === Spacing System (4px base) === */
    --space-0: 0;
    --space-1: 0.25rem; /* 4px */
    --space-2: 0.5rem; /* 8px */
    --space-3: 0.75rem; /* 12px */
    --space-4: 1rem; /* 16px */
    --space-5: 1.25rem; /* 20px */
    --space-6: 1.5rem; /* 24px */
    --space-7: 1.75rem; /* 28px */
    --space-8: 2rem; /* 32px */
    --space-10: 2.5rem; /* 40px */
    --space-12: 3rem; /* 48px */
    --space-16: 4rem; /* 64px */
    --space-20: 5rem; /* 80px */

    /* === Border Radius === */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* === Typography === */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-mono: 'Menlo', 'Monaco', 'Courier New', monospace;

    /* Font Sizes */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-base: 1rem; /* 16px */
    --font-size-lg: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-2xl: 1.5rem; /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */

    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === Transitions === */
    --transition-fastest: 100ms ease;
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    --transition-slowest: 500ms ease;

    /* === Z-Index Scale === */
    --z-dropdown: 1025;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* === Tracker Module Specific === */
    /* Grid lines */
    --tracker-grid-line: #e2e8f0;
    --tracker-grid-line-strong: #cbd5e1;
    /* Vector/task colors */
    --tracker-vector-cell-bg: #4299e1;
    --tracker-vector-stroke: #cbd5e0;
    --tracker-vector-fill: #cbd5e0;
    --tracker-vector-text: #e2e8f0;
    /* Completed state */
    --tracker-completed-bg: #10b981;
    --tracker-completed-hover: #059669;
    --tracker-completed-stroke: #6ee7b7;
    /* Highlights */
    --tracker-highlight-bg: #60a5fa;
    --tracker-highlight-stroke: #ffffff;
    --tracker-empty-highlight: #e2e8f0;
    /* Day off */
    --tracker-dayoff-text: #ef4444;
    /* Drop targets */
    --tracker-drop-target: #60a5fa;
    --tracker-drop-indicator: #3b82f6;
    /* Cells */
    --tracker-cell-hover: #f1f5f9;
    --tracker-cell-selected: rgba(59, 130, 246, 0.3);
    /* Overtime/Overhead */
    --tracker-overtime-cell: rgba(220, 38, 38, 0.7);
    --tracker-overtime-highlight: rgba(255, 82, 82, 0.9);
    --tracker-overhead-cell: rgba(255, 186, 97, 0.05);
    /* Day off backgrounds */
    --tracker-dayoff-weekend: rgba(88, 80, 236, 0.15);
    --tracker-dayoff-holiday: rgba(219, 39, 119, 0.15);
    --tracker-dayoff-transferred: rgba(20, 184, 166, 0.15);
}

/* === ТЕМНАЯ ТЕМА === */
[data-theme='dark'] {
    /* Native form elements styling */
    color-scheme: dark;

    /* === Backgrounds === */
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #4b5563;
    --bg-tertiary-transparent: rgba(75, 85, 99, 0.5);
    --bg-hover: #374151;
    --bg-overlay: rgba(0, 0, 0, 0.8);

    /* === Legacy Variables for Dark Theme === */
    --card-header-bg: var(--bg-primary); /* Same as card body - no visual separation */

    /* === Text Colors === */
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-tertiary: #d1d5db;
    --text-inverse: #ffffff; /* White text for colored buttons */
    --text-disabled: #6b7280;

    /* === Border & Dividers === */
    --border-primary: #4b5563;
    --border-secondary: #6b7280;
    --border-hover: #9ca3af;
    --divider: #374151;

    /* === RGB Versions for rgba() usage (Dark Theme) === */
    --brand-primary-rgb: 99, 102, 241;
    --text-inverse-rgb: 255, 255, 255;
    --color-info-rgb: 59, 130, 246;
    --color-error-rgb: 248, 113, 113;
    --color-success-rgb: 52, 211, 153;
    --color-warning-rgb: 251, 191, 36;

    /* === Brand Colors (более яркие для темной темы) === */
    --brand-primary: #6366f1;
    --brand-primary-hover: #818cf8;
    --brand-primary-light: #a5b4fc;
    --brand-primary-dark: #4f46e5;
    --brand-secondary: #818cf8;
    --focus-ring: rgba(99, 102, 241, 0.2);

    /* === Semantic Colors (адаптированные для темной темы) === */
    /* Success */
    --color-success: #34d399;
    --color-success-hover: #6ee7b7;
    --color-success-light: rgba(52, 211, 153, 0.3);
    --color-success-bg: rgba(52, 211, 153, 0.1);

    /* Warning */
    --color-warning: #fbbf24;
    --color-warning-hover: #fcd34d;
    --color-warning-light: rgba(251, 191, 36, 0.3);
    --color-warning-bg: rgba(251, 191, 36, 0.1);

    /* Error */
    --color-error: #f87171;
    --color-error-hover: #fca5a5;
    --color-error-light: rgba(248, 113, 113, 0.3);
    --color-error-bg: rgba(248, 113, 113, 0.1);

    /* Info */
    --color-info: #60a5fa;
    --color-info-hover: #93c5fd;
    --color-info-light: rgba(96, 165, 250, 0.3);
    --color-info-bg: rgba(96, 165, 250, 0.1);

    /* Lock (editing by another user) */
    --color-lock-bg: rgba(251, 191, 36, 0.1);

    /* Purple */
    --color-purple: #a855f7;
    --color-purple-hover: #c084fc;
    --color-purple-light: rgba(168, 85, 247, 0.3);
    --color-purple-bg: rgba(168, 85, 247, 0.1);

    /* === Tooltip (Dark Theme) === */
    --tooltip-bg: rgba(66, 66, 66, 0.98);
    --tooltip-text: #e0e0e0;
    --tooltip-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --tooltip-border: transparent;

    /* === Shadows (более заметные для темной темы) === */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.6);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.7);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.8);

    /* === Tracker Module Specific (Dark) === */
    /* Grid lines */
    --tracker-grid-line: #374151;
    --tracker-grid-line-strong: #4b5563;
    /* Vector/task colors */
    --tracker-vector-cell-bg: #4299e1;
    --tracker-vector-stroke: #cbd5e0;
    --tracker-vector-fill: #cbd5e0;
    --tracker-vector-text: #e2e8f0;
    /* Completed state */
    --tracker-completed-bg: #34d399;
    --tracker-completed-hover: #6ee7b7;
    --tracker-completed-stroke: #a7f3d0;
    /* Highlights */
    --tracker-highlight-bg: #3b82f6;
    --tracker-highlight-stroke: #ffffff;
    --tracker-empty-highlight: #4b5563;
    /* Day off */
    --tracker-dayoff-text: #fca5a5;
    /* Drop targets */
    --tracker-drop-target: #60a5fa;
    --tracker-drop-indicator: #3b82f6;
    /* Cells */
    --tracker-cell-hover: #374151;
    --tracker-cell-selected: rgba(96, 165, 250, 0.4);
    /* Overtime/Overhead */
    --tracker-overtime-cell: rgba(248, 113, 113, 0.7);
    --tracker-overtime-highlight: rgba(252, 165, 165, 0.9);
    --tracker-overhead-cell: rgba(251, 191, 36, 0.08);
    /* Day off backgrounds */
    --tracker-dayoff-weekend: rgba(129, 140, 248, 0.2);
    --tracker-dayoff-holiday: rgba(244, 114, 182, 0.2);
    --tracker-dayoff-transferred: rgba(45, 212, 191, 0.2);
}

/* === DARK THEME: REMOVE DECORATIVE BORDERS AND SHADOWS === */
/* Remove borders and shadows from non-functional elements for cleaner look like tracker */
[data-theme='dark'] .card,
[data-theme='dark'] .module-card,
[data-theme='dark'] .workspace-card,
[data-theme='dark'] .auth-form-wrapper,
[data-theme='dark'] .profile-controls-wrapper,
[data-theme='dark'] .start-screen-placeholder,
[data-theme='dark'] .loading-placeholder,
[data-theme='dark'] .dynamic-list-item,
[data-theme='dark'] .bottom-nav,
[data-theme='dark'] .bottom-nav-btn,
[data-theme='dark'] .dropdown-menu,
[data-theme='dark'] .workspace-selector {
    border-color: transparent;
    box-shadow: none;
}

/* Keep borders on functional elements - inputs, buttons, selects remain with borders */
/* This is intentional - buttons and inputs need visual definition */

/* === BASE STYLES === */
* {
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    margin: 0;
    padding: 0;
    transition:
        background-color var(--transition-base),
        color var(--transition-base);
}

/* === SMOOTH THEME TRANSITIONS === */
*,
*::before,
*::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: var(--transition-base);
    transition-timing-function: ease;
}

/* Исключения для анимаций */
.no-theme-transition,
.no-theme-transition *,
.no-theme-transition *::before,
.no-theme-transition *::after {
    transition-property: none !important;
    transition-duration: 0s !important;
}

/* === SCROLLBAR STYLES === */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
    border-radius: var(--radius-md);
}

::-webkit-scrollbar-thumb {
    background: var(--border-primary);
    border-radius: var(--radius-md);
    border: 2px solid var(--bg-primary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--border-secondary);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) var(--bg-primary);
}

/* === THEME-ADAPTIVE ICONS === */
/* Icons that should adapt to theme colors (e.g., pattern selector icons) */
.pattern-icon {
    /* Light theme: gray icons to match --text-secondary (#64748b) */
    filter: brightness(0) saturate(100%) invert(45%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(95%);
    transition: filter var(--transition-base);
}

[data-theme='dark'] .pattern-icon {
    /* Dark theme: light gray icons to match --text-secondary (#e5e7eb) */
    filter: brightness(0) invert(1) brightness(0.85);
}