/* CSS Variables for i18n Layout Template - Pastel Breeze Theme */
:root {
  /* Colors - Pastel Breeze Light Theme */
  --primary-color: #4a90e2; /* Мягкий голубой */
  --secondary-color: #8e8e93; /* Нейтральный серый */
  --accent-color: #64d2ff; /* Яркий голубой акцент */
  --success-color: #34c759; /* Зеленый */
  --warning-color: #ff9500; /* Оранжевый */
  --error-color: #ff3b30; /* Красный */

  /* Background Colors - Pastel Breeze */
  --bg-primary: #fbfbfb; /* Почти белый */
  --bg-secondary: #f5f5f5; /* Серо-белый фон */
  --bg-tertiary: #f0f0f0; /* Светло-серый */
  --bg-overlay: rgba(251, 251, 251, 0.95);

  /* Text Colors - Pastel Breeze */
  --text-primary: #333333; /* Почти черный, но не режет глаз */
  --text-secondary: #666666; /* Для описаний, метаданных */
  --text-tertiary: #999999; /* Третичный текст */
  --text-inverse: #fbfbfb; /* Инвертированный текст */

  /* Border Colors - Pastel Breeze */
  --border-primary: #e0e0e0; /* Светло-серая граница */
  --border-secondary: #d0d0d0; /* Вторичная граница */
  --border-focus: var(--primary-color);

  /* Shadow Colors - Pastel Breeze */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Utility Shadows */
  --u-shadow-default: 0 2px 10px rgba(0,0,0,0.1);
  --glass-shadow-hover: 0 12px 40px rgba(74, 144, 226, 0.25);
  --glass-shadow-focus: 0 0 0 3px rgba(74, 144, 226, 0.3);

  /* Glass Morphism - Pastel Breeze */
  --glass-bg: rgba(251, 251, 251, 0.25);
  --glass-border: rgba(224, 224, 224, 0.18);
  --glass-shadow: 0 8px 32px rgba(74, 144, 226, 0.15);
  --backdrop-blur: blur(10px);

  /* Pastel Breeze Specific Colors */
  --gradient-primary: linear-gradient(135deg, #c6e7ff, #ffddae);
  --gradient-secondary: linear-gradient(121deg, hsla(210, 100%, 23%, 0.05), hsla(216, 4%, 73%, 0.1));
  --highlight-color: #d4f6ff; /* Мятно-голубой для hover */
  --shadow-soft: rgba(0, 0, 0, 0.05);
  --shadow-tooltip: #b1b1b1;

  /* Typography */
  --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, Inconsolata, 'Roboto Mono', 'Source Code Pro', monospace;

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

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

  /* Line Heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;

  /* Spacing */
  --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-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */
  --space-16: 4rem; /* 64px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */

  /* Utility Spacing */
  --u-container-padding: 20px;

  /* Border Radius */
  --radius-sm: 0.125rem; /* 2px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-full: 9999px;

  /* Breakpoints (for reference in JS) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Mobile breakpoints (as specified in requirements) */
  --mobile-small: 375px; /* iPhone 6-8 */
  --mobile-large: 414px; /* iPhone X-16 */
  --tablet: 768px; /* iPad mini */
  --desktop: 1024px; /* Desktop */

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Z-index layers */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
}

/* Dark Theme Variables - Complementary to Pastel Breeze */
[data-theme='dark'] {
  /* Colors - Dark Theme */
  --primary-color: #64d2ff; /* Яркий голубой для темной темы */
  --secondary-color: #8e8e93; /* Нейтральный серый */
  --accent-color: #4a90e2; /* Мягкий голубой акцент */
  --success-color: #34c759; /* Зеленый */
  --warning-color: #ff9500; /* Оранжевый */
  --error-color: #ff3b30; /* Красный */

  /* Background Colors - Dark Theme */
  --bg-primary: #1a1a1a; /* Темно-серый фон */
  --bg-secondary: #2a2a2a; /* Вторичный темный фон */
  --bg-tertiary: #3a3a3a; /* Третичный темный фон */
  --bg-overlay: rgba(26, 26, 26, 0.95);

  /* Text Colors - Dark Theme */
  --text-primary: #f0f0f0; /* Светло-серый текст */
  --text-secondary: #b0b0b0; /* Вторичный текст */
  --text-tertiary: #808080; /* Третичный текст */
  --text-inverse: #1a1a1a; /* Инвертированный текст */

  /* Border Colors - Dark Theme */
  --border-primary: #404040; /* Темно-серая граница */
  --border-secondary: #505050; /* Вторичная граница */
  --border-focus: var(--primary-color);

  /* Shadow Colors - Dark Theme */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);

  /* Glass Morphism - Dark Theme */
  --glass-bg: rgba(26, 26, 26, 0.25);
  --glass-border: rgba(240, 240, 240, 0.18);
  --glass-shadow: 0 8px 32px rgba(100, 210, 255, 0.2);
  --backdrop-blur: blur(10px);

  /* Dark Theme Specific Colors */
  --gradient-primary: linear-gradient(135deg, #2a2a2a, #1a1a1a);
  --gradient-secondary: linear-gradient(121deg, hsla(210, 100%, 23%, 0.1), hsla(216, 4%, 73%, 0.05));
  --highlight-color: #2a4a5a; /* Темно-голубой для hover */
  --shadow-soft: rgba(0, 0, 0, 0.3);
  --shadow-tooltip: #606060;
}

/* Utility Classes */
.glass {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.transition-all {
  transition: all var(--transition-normal);
}

.transition-colors {
  transition: color var(--transition-normal), background-color var(--transition-normal), border-color var(--transition-normal);
}

.transition-transform {
  transition: transform var(--transition-normal);
}

/* Focus styles */
.focus-ring:focus {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

.focus-ring:focus:not(:focus-visible) {
  outline: none;
}

/* Screen reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}