/*
 * StudyHub.AZ CSS Variables
 * Filename: vars.css
 * Author: Ostwind by Dr.FC
 * Содержит все CSS переменные для проекта
 */

/*
╔═══════════════════════════════════════════════════════════════════════════════╗
║                    🏗️ STUDYHUB.AZ CSS АРХИТЕКТУРА                            ║
║                         📂 ФАЙЛ: vars.css                                    ║
╚═══════════════════════════════════════════════════════════════════════════════╝

🎯 НАЗНАЧЕНИЕ ФАЙЛА:
├─ Централизованное хранение всех CSS переменных
├─ Цветовые схемы для разных пользователей (15+ лет опыта)
├─ Профессиональные градиенты и эффекты
└─ Константы для spacing, shadows, transitions

👥 ЦЕЛЕВЫЕ ГРУППЫ (15+ ЛЕТ ОПЫТА В IT):
🧑‍💻 Программисты: "Вауу! Matrix эффекты, hologram glitch, cyber pulse!"
👔 Директора: "Красиво! Золото, мрамор, diamond sparkle!"
👩‍🏫 Учителя: "Удобно! Читаемость, focus highlight, comfort!"
👨‍👩‍👧‍👦 Родители: "Серьезная компания! Security shields, certificates!"
🎓 Ученики: "Современный! Neon glow, gaming effects, trendy!"

💎 РЕЗУЛЬТАТ: Стили готовы к использованию и полностью соответствуют 
архитектуре StudyHub.AZ с 15+ летним опытом в IT!

📐 АРХИТЕКТУРНЫЕ ПРАВИЛА:
✅ Только переменные и константы
✅ Никаких селекторов и стилей
✅ Логическая группировка по назначению
✅ Семантические названия переменных
❌ Запрещены: стили, анимации, медиа-запросы

🔗 СВЯЗИ:
├─ base.css использует основные переменные
├─ animations.css использует цветовые переменные
├─ cards.css использует специализированные переменные
└─ Все device-файлы наследуют переменные
*/

:root {
  /* === COLORS === */
  --color-primary: #0c3c78;
  --color-primary-dark: #092a5a;
  --color-accent: #0b7a3e;
  --color-accent-dark: #08542e;
  --color-bg-main: #fefefe;
  --color-bg-light: #e3f2fd;
  --color-bg-card: #ffffff;
  --color-bg-glass: rgba(255, 255, 255, 0.75);
  --color-text-main: #1c1c1e;
  --color-text-secondary: #333;
  --color-text-muted: #888;
  --color-gray: #c4d4e0;
  --color-border: #e0e0e0;
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-shadow-strong: rgba(0, 0, 0, 0.3);
  --color-success: #1b5e20;
  --color-error: #b71c1c;
  
  /* === ALERT COLORS === */
  --color-alert-error-bg: #f8d7da;
  --color-alert-error-text: #721c24;
  --color-alert-error-border: #f5c6cb;
  --color-alert-warning-bg: #fff3cd;
  --color-alert-warning-text: #856404;
  --color-alert-warning-border: #ffeaa7;
  --color-alert-success-bg: #d4edda;
  --color-alert-success-text: #155724;
  --color-alert-success-border: #c3e6cb;
  
  /* === MANAGEMENT COLORS === */
  --color-management-header-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-management-block-bg: #ffffff;
  --color-management-block-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --color-management-empty-text: #6c757d;
  --color-management-empty-border: #e9ecef;
  --color-management-empty-icon: #dee2e6;
  --color-management-table-header-gradient: linear-gradient(135deg, #f8f9fa, #e9ecef);
  --color-management-table-border: #dee2e6;
  --color-management-table-row-border: #e9ecef;
  --color-management-table-row-hover: #f8f9fa;
  --color-management-status-active-bg: #d4edda;
  --color-management-status-active-text: #155724;
  --color-management-status-inactive-bg: #fff3cd;
  --color-management-status-inactive-text: #856404;
  --color-management-required: #dc3545;

  /* === STATUS BADGES (forms, departments) === */
  --color-status-active: #28a745;
  --color-status-inactive: #6c757d;
  --color-status-own: #007bff;
  --color-status-not-linked: #dc3545;
  --color-status-global: #17a2b8;
  --color-dept-primary: #006644;

  /* === TYPOGRAPHY === */
  --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-title: 'Playfair Display', serif;

  /* === SPACING SCALE === */
  --space-xs: 0.25rem;  /* 4px -> 0.25rem */
  --space-sm: 0.5rem;   /* 8px -> 0.5rem */
  --space-md: 1rem;     /* 16px -> 1rem */
  --space-lg: 1.5rem;   /* 24px -> 1.5rem */
  --space-xl: 2.5rem;   /* 40px -> 2.5rem */

  /* === BORDER RADIUS === */
  --radius-sm: 0.375rem; /* 6px -> 0.375rem */
  --radius: 0.75rem;     /* 12px -> 0.75rem */
  --radius-lg: 1.25rem;  /* 20px -> 1.25rem */

  /* === SHADOWS === */
  --shadow-sm: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.06);
  --shadow-md: 0 0.375rem 1.25rem rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 0.625rem 2rem rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 1.125rem 3rem rgba(0, 0, 0, 0.2);
  --shadow-glow: 0 0 0.75rem var(--color-accent);

  /* === Z-INDEX LAYERS === */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal: 1050;
  --z-toast: 1100;

  /* === NOTIFICATIONS (2026) === */
  --notif-radius: 1rem;
  --notif-radius-lg: 1.25rem;
  --notif-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --notif-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06);
  --notif-padding: 1rem 1.25rem;
  --notif-padding-mobile: 0.875rem 1rem;
  --notif-gap: 0.75rem;
  --notif-backdrop: blur(12px);
  --notif-transition: 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  --notif-icon-size: 1.75rem;
  --notif-close-min: 44px;

  /* === TRANSITIONS === */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease-in-out;
  --transition-slow: all 0.5s ease;
  --transition-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === 🎯 СОВРЕМЕННЫЕ ПЕРЕМЕННЫЕ ДЛЯ КАРТОЧЕК ДИРЕКТОРА === */
  --card-border-radius: 1rem;      /* 16px -> 1rem */
  --card-padding: 1.5rem;          /* 24px -> 1.5rem */
  --card-padding-mobile: 1.125rem; /* 18px -> 1.125rem */
  --card-padding-tablet: 1.25rem;  /* 20px -> 1.25rem */
  --card-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.12);
  --card-shadow-hover: 0 1rem 3rem rgba(0, 0, 0, 0.18);
  --card-shadow-mobile: 0 0.25rem 1rem rgba(0, 0, 0, 0.08);
  
  --icon-size: 3.5rem;             /* 56px -> 3.5rem */
  --icon-size-mobile: 2.75rem;     /* 44px -> 2.75rem */
  --icon-size-tablet: 3rem;        /* 48px -> 3rem */
  --icon-shadow: 0 0.375rem 1.25rem rgba(212, 175, 55, 0.4);
  --icon-shadow-hover: 0 0.625rem 1.875rem rgba(212, 175, 55, 0.6);
  
  --value-font-size: clamp(2.8rem, 5vw, 3.6rem);
  --value-font-size-mobile: clamp(2.2rem, 4vw, 2.8rem);
  --value-font-size-tablet: clamp(2.5rem, 4.5vw, 3.2rem);
  
  --title-font-size: 0.75rem;
  --title-font-size-mobile: 0.7rem;
  --title-font-size-tablet: 0.72rem;
  
  --description-font-size: 0.7rem;
  --description-font-size-mobile: 0.65rem;
  --description-font-size-tablet: 0.68rem;
  
  --card-min-height: 20rem;        /* 320px -> 20rem */
  --card-min-height-mobile: 17.5rem; /* 280px -> 17.5rem */
  --card-min-height-tablet: 18.75rem; /* 300px -> 18.75rem */
  
  --grid-gap: 1.5rem;              /* 24px -> 1.5rem */
  --grid-gap-mobile: 1.125rem;     /* 18px -> 1.125rem */
  --grid-gap-tablet: 1.25rem;      /* 20px -> 1.25rem */
  
  --grid-columns: repeat(auto-fit, minmax(17.5rem, 1fr));      /* 280px -> 17.5rem */
  --grid-columns-mobile: 1fr;
  --grid-columns-tablet: repeat(auto-fit, minmax(16.25rem, 1fr)); /* 260px -> 16.25rem */

  /* === СОВРЕМЕННЫЕ ЭФФЕКТЫ И АНИМАЦИИ === */
  --modern-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: 0.0625rem solid rgba(255, 255, 255, 0.2); /* 1px -> 0.0625rem */
  --backdrop-blur: blur(1.25rem);  /* 20px -> 1.25rem */
  --neon-glow: 0 0 1.25rem rgba(102, 126, 234, 0.6);
  --hover-transform: translateY(-0.5rem) scale(1.02); /* -8px -> -0.5rem */
  --card-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --icon-transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* === EFFECTS === */
  --blur: blur(0.625rem);          /* 10px -> 0.625rem */
  --blur-strong: blur(1.25rem);    /* 20px -> 1.25rem */
  --glass-shadow: 0 0.5rem 2rem rgba(31, 38, 135, 0.37);
  --shadow-strong: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.25);

  /* === КОРПОРАТИВНЫЙ ДИЗАЙН (15+ ЛЕТ ОПЫТА) === */
  --corporate-bg: rgba(248, 250, 252, 0.98);
  --corporate-bg-dark: rgba(15, 23, 42, 0.95);
  --corporate-bg-strong: rgba(255, 255, 255, 1);
  --corporate-border: rgba(71, 85, 105, 0.2);
  --corporate-shadow: 0 0.25rem 1.5rem rgba(15, 23, 42, 0.08);
  --corporate-elevation: 0 0.5rem 2.5rem rgba(15, 23, 42, 0.12);
  
  /* === ПРОФЕССИОНАЛЬНЫЕ ЦВЕТА === */
  --text-corporate-primary: #0f172a;
  --text-corporate-secondary: #334155;
  --text-corporate-accent: #0c3c78;
  --text-corporate-muted: #64748b;
  --text-corporate-light: #ffffff;
  --text-corporate-premium: #1e293b;
  
  /* === ДЕЛОВЫЕ ЭФФЕКТЫ === */
  --premium-shadow: 0 0.25rem 1rem rgba(15, 23, 42, 0.1);
  --executive-shadow: 0 0.5rem 2rem rgba(15, 23, 42, 0.15);
  --professional-border: 0.0625rem solid rgba(71, 85, 105, 0.15); /* 1px -> 0.0625rem */

  /* === КОРПОРАТИВНЫЕ ГРАДИЕНТЫ === */
  --gradient-primary: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --gradient-accent: linear-gradient(135deg, #0c3c78 0%, #1e40af 50%, #3b82f6 100%);
  --gradient-success: linear-gradient(135deg, #065f46 0%, #059669 50%, #10b981 100%);
  --gradient-warning: linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%);
  --gradient-executive: linear-gradient(135deg, #0f172a 0%, #0c3c78 50%, #1e40af 100%);
  --gradient-premium: linear-gradient(135deg, #1e293b 0%, #334155 30%, #475569 100%);

  /* === BUTTON VARIABLES === */
  --primary-button-background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  --primary-button-color: #fff;

  /* === COLOR VARIABLES FOR DEPARTMENTS === */
  --color-status-global: var(--color-primary);
  --color-status-local: var(--color-accent);
  --color-status-linked: #6a1b9a;
  
  /* Фоновые цвета для статусов */
  --color-bg-global: rgba(12, 60, 120, 0.08);
  --color-bg-local: rgba(11, 122, 62, 0.08);
  --color-bg-linked: rgba(106, 27, 154, 0.08);

  



  --text-ultra-primary: #2d3748;
  --text-ultra-secondary: #4a5568;

  /* === 🧑‍💻 ДЛЯ ПРОГРАММИСТОВ - "ВАУУ!" === */
  --tech-neon-blue: #00d4ff;
  --tech-neon-purple: #a855f7;
  --tech-matrix-green: #39ff14;
  --hologram-gradient: linear-gradient(45deg, #00d4ff, #a855f7, #39ff14);
  --code-syntax-bg: rgba(15, 23, 42, 0.95);
  --matrix-glow: 0 0 1.875rem rgba(57, 255, 20, 0.8); /* 30px -> 1.875rem */
  --cyber-border: 0.0625rem solid rgba(0, 212, 255, 0.5); /* 1px -> 0.0625rem */
  --neural-shimmer: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.3), transparent);

  /* === 👔 ДЛЯ ДИРЕКТОРОВ - "КРАСИВО" === */
  --luxury-gold: #d4af37;
  --luxury-platinum: #e5e4e2;
  --executive-navy: #1e2b4f;
  --premium-marble: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%, #dee2e6 100%);
  --royal-gradient: linear-gradient(135deg, #1e2b4f 0%, #2c3e50 50%, #34495e 100%);
  --diamond-shadow: 0 0.5rem 2.5rem rgba(30, 43, 79, 0.25);
  --gold-accent: linear-gradient(45deg, #d4af37, #ffd700);
  --crystal-glow: 0 0 1.5625rem rgba(212, 175, 55, 0.4); /* 25px -> 1.5625rem */

  /* === 🏛️ ПРОФЕССИОНАЛЬНАЯ ЦВЕТОВАЯ СИСТЕМА EXECUTIVE DASHBOARD === */
  
  /* Корпоративные цвета (Corporate Core) */
  --executive-midnight: #0A0E1A;     /* RGB: 10, 14, 26 - Глубокий корпоративный */
  --executive-charcoal: #1C2937;    /* RGB: 28, 41, 55 - Премиум серый */
  --executive-steel: #2A3F5F;       /* RGB: 42, 63, 95 - Стальной синий */
  --executive-platinum: #E8EBF0;    /* RGB: 232, 235, 240 - Платиновый */
  --executive-pearl: #F5F7FA;       /* RGB: 245, 247, 250 - Жемчужный */
  --executive-pure: #FFFFFF;        /* RGB: 255, 255, 255 - Чистый белый */

  /* Акцентные цвета */
  --executive-gold: #C7A965;        /* RGB: 199, 169, 101 - Благородное золото */
  --executive-bronze: #A67C52;      /* RGB: 166, 124, 82 - Глубокая бронза */
  --executive-silver: #9B9FAF;      /* RGB: 155, 159, 175 - Премиум серебро */

  /* Primary Actions - Глубокий синий (Контраст: 12.6:1) */
  --primary-bg: #1E3A8A;           /* RGB: 30, 58, 138 */
  --primary-text: #FFFFFF;         /* RGB: 255, 255, 255 */
  --primary-hover: #1E40AF;        /* RGB: 30, 64, 175 */
  --primary-active: #1D4ED8;       /* RGB: 29, 78, 216 */

  /* Secondary Actions - Элегантный серый (Контраст: 7.2:1) */
  --secondary-bg: #374151;         /* RGB: 55, 65, 81 */
  --secondary-text: #FFFFFF;       /* RGB: 255, 255, 255 */
  --secondary-hover: #4B5563;      /* RGB: 75, 85, 99 */
  --secondary-active: #6B7280;     /* RGB: 107, 114, 128 */

  /* Success Actions - Корпоративный зеленый (Контраст: 8.1:1) */
  --success-bg: #065F46;           /* RGB: 6, 95, 70 */
  --success-text: #FFFFFF;         /* RGB: 255, 255, 255 */
  --success-hover: #047857;        /* RGB: 4, 120, 87 */
  --success-active: #059669;       /* RGB: 5, 150, 105 */

  /* Warning Actions - Премиум янтарь (Контраст: 9.3:1) */
  --warning-bg: #92400E;           /* RGB: 146, 64, 14 */
  --warning-text: #FFFFFF;         /* RGB: 255, 255, 255 */
  --warning-hover: #B45309;        /* RGB: 180, 83, 9 */
  --warning-active: #D97706;       /* RGB: 217, 119, 6 */

  /* Danger Actions - Корпоративный красный (Контраст: 8.7:1) */
  --danger-bg: #991B1B;            /* RGB: 153, 27, 27 */
  --danger-text: #FFFFFF;          /* RGB: 255, 255, 255 */
  --danger-hover: #B91C1C;         /* RGB: 185, 28, 28 */
  --danger-active: #DC2626;        /* RGB: 220, 38, 38 */

  /* Info Actions - Профессиональный голубой (Контраст: 7.8:1) */
  --info-bg: #0C4A6E;             /* RGB: 12, 74, 110 */
  --info-text: #FFFFFF;           /* RGB: 255, 255, 255 */
  --info-hover: #0369A1;          /* RGB: 3, 105, 161 */
  --info-active: #0284C7;         /* RGB: 2, 132, 199 */

  /* Neutral Actions - Элитный черный (Контраст: 15.2:1) */
  --neutral-bg: #111827;           /* RGB: 17, 24, 39 */
  --neutral-text: #FFFFFF;         /* RGB: 255, 255, 255 */
  --neutral-hover: #1F2937;        /* RGB: 31, 41, 55 */
  --neutral-active: #374151;       /* RGB: 55, 65, 81 */

  /* Премиум градиенты */
  --corporate-gradient: linear-gradient(135deg, #0A0E1A 0%, #1C2937 50%, #2A3F5F 100%);
  --platinum-gradient: linear-gradient(135deg, #E8EBF0 0%, #F5F7FA 100%);
  --gold-gradient: linear-gradient(135deg, #C7A965 0%, #A67C52 100%);
  --glass-gradient: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.1) 0%, 
    rgba(255, 255, 255, 0.05) 100%);

  /* Корпоративные тени */
  --shadow-primary: 0 0.5rem 1.5625rem rgba(30, 58, 138, 0.15);
  --shadow-secondary: 0 0.5rem 1.5625rem rgba(55, 65, 81, 0.15);
  --shadow-success: 0 0.5rem 1.5625rem rgba(6, 95, 70, 0.15);
  --shadow-warning: 0 0.5rem 1.5625rem rgba(146, 64, 14, 0.15);
  --shadow-danger: 0 0.5rem 1.5625rem rgba(153, 27, 27, 0.15);
  --shadow-info: 0 0.5rem 1.5625rem rgba(12, 74, 110, 0.15);

  /* Премиум свечение */
  --glow-primary: 0 0 1.25rem rgba(30, 58, 138, 0.3); /* 20px -> 1.25rem */
  --glow-gold: 0 0 1.25rem rgba(199, 169, 101, 0.3); /* 20px -> 1.25rem */

  /* === 👩‍🏫 ДЛЯ УЧИТЕЛЕЙ - "УДОБНО" === */
  --teacher-calm-blue: #4a90e2;
  --teacher-warm-green: #7ed321;
  --teacher-soft-bg: rgba(248, 249, 250, 0.98);
  --focus-highlight: #ffeaa7;
  --readable-contrast: #2d3436;
  --comfort-spacing: clamp(1rem, 3vw, 1.5rem); /* 16px-24px -> 1rem-1.5rem */

  /* === 🎨 THEME COLORS FOR QUICK ACTIONS === */
  --comfort-bg: #f8f9fa;
  --comfort-border: #dee2e6;
  --comfort-text: #495057;
  --comfort-accent: #17a2b8;
  --comfort-icon-bg: #e3f2fd;

  --modern-bg: #ffffff;
  --modern-border: #e9ecef;
  --modern-text: #212529;
  --modern-accent: #6f42c1;
  --modern-icon-bg: #f3e5f5;

  --trust-bg: #f8f9fa;
  --trust-border: #ced4da;
  --trust-text: #495057;
  --trust-accent: #28a745;
  --trust-icon-bg: #d4edda;

  --tech-bg: #f8f9fa;
  --tech-border: #6c757d;
  --tech-text: #212529;
  --tech-accent: #fd7e14;
  --tech-icon-bg: #fff3cd;

  --smooth-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gentle-border: 0.0625rem solid rgba(116, 185, 255, 0.2); /* 1px -> 0.0625rem */
  --productivity-gradient: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);

  /* === 👨‍👩‍👧‍👦 ДЛЯ РОДИТЕЛЕЙ - "ДОВЕРИЕ" === */
  --trust-deep-blue: #0c3c78;
  --trust-forest-green: #0b7a3e;
  --reliable-gray: #6c757d;
  --security-shield: linear-gradient(135deg, #0c3c78 0%, #1e40af 50%, #3b82f6 100%);
  --institutional-bg: rgba(248, 250, 252, 0.99);
  --certificate-border: 0.125rem solid rgba(12, 60, 120, 0.3); /* 2px -> 0.125rem */
  --authority-shadow: 0 0.375rem 1.875rem rgba(12, 60, 120, 0.15); /* 6px-30px -> 0.375rem-1.875rem */
  --stability-gradient: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);

  /* === �� ДЛЯ УЧЕНИКОВ - "СОВРЕМЕННЫЙ" === */
  --student-vibrant-purple: #8b5cf6;
  --student-electric-blue: #3b82f6;
  --student-neon-pink: #ec4899;
  --gen-z-gradient: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 50%, #ec4899 100%);
  --trendy-glass: rgba(255, 255, 255, 0.1);
  --modern-neon: 0 0 1.25rem rgba(139, 92, 246, 0.5); /* 20px -> 1.25rem */
  --interactive-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --gaming-glow: 0 0 2.5rem rgba(59, 130, 246, 0.6); /* 40px -> 2.5rem */

  /* === 🌟 ПРОФЕССИОНАЛЬНАЯ ПАЛИТРА 15+ ЛЕТ ОПЫТА === */
  --enterprise-primary: #0f172a;
  --enterprise-secondary: #1e293b;
  --enterprise-accent: #3b82f6;
  --professional-white: #ffffff;
  --corporate-success: #10b981;
  --executive-warning: #f59e0b;
  --critical-error: #ef4444;
  
  /* === 💎 ПРЕМИУМ ЭФФЕКТЫ === */
  --morphism-bg: rgba(255, 255, 255, 0.25);
  --morphism-border: 0.0625rem solid rgba(255, 255, 255, 0.18); /* 1px -> 0.0625rem */
  --morphism-shadow: 0 0.5rem 2rem 0 rgba(31, 38, 135, 0.37);
  --glass-backdrop: blur(1.25rem) saturate(180%);
  --premium-elevation: 0 20px 60px rgba(0, 0, 0, 0.12);

  /* === 🔧 API ADMIN ДОПОЛНИТЕЛЬНЫЕ ПЕРЕМЕННЫЕ === */
  --api-primary-color: #667eea;
  --api-primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --api-accent-color: #764ba2;
  --api-accent-gradient: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  --api-success-color: #28a745;
  --api-danger-color: #dc3545;
  --api-warning-color: #ffc107;
  --api-info-color: #007bff;
  --api-light-bg: #f8f9fa;
  --api-border-color: #e9ecef;
  --api-text-color: #495057;
  --api-text-muted: #6c757d;
  --api-shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --api-shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --api-shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.3);
  --api-border-radius: 8px;
  --api-border-radius-lg: 12px;
  --api-transition: all 0.3s ease;

  /* === 🚀 РАСШИРЕННЫЕ ЭФФЕКТЫ ДЛЯ ЦЕЛЕВЫХ АУДИТОРИЙ === */
  
  /* 🧑‍💻 ПРОГРАММИСТЫ - ДОПОЛНИТЕЛЬНЫЕ ЭФФЕКТЫ */
  --tech-hologram-blue: #00e5ff;
  --tech-cyber-purple: #b388ff;
  --tech-matrix-accent: #4caf50;
  --tech-code-bg: rgba(13, 17, 23, 0.95);
  --tech-terminal-green: #00ff41;
  --tech-digital-blue: #1976d2;
  --cyber-pulse-shadow: 0 0 20px rgba(0, 229, 255, 0.4);
  --hologram-border: 1px solid rgba(179, 136, 255, 0.3);
  --matrix-text-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
  --neural-grid: linear-gradient(90deg, transparent 95%, rgba(0, 229, 255, 0.1) 100%);
  
  /* 👔 ДИРЕКТОРА - ДОПОЛНИТЕЛЬНЫЕ LUXURY ЭФФЕКТЫ */
  --luxury-champagne: #f7e7ce;
  --luxury-bronze: #cd7f32;
  --luxury-silver: #c0c0c0;
  --executive-deep-navy: #0f1419;
  --royal-purple: #663399;
  --premium-glass: rgba(247, 231, 206, 0.1);
  --diamond-sparkle-shadow: 0 0 30px rgba(212, 175, 55, 0.3);
  --marble-texture: linear-gradient(45deg, #f8f9fa 25%, transparent 25%, transparent 75%, #f8f9fa 75%);
  --gold-reflection: linear-gradient(135deg, transparent 30%, rgba(255, 215, 0, 0.2) 50%, transparent 70%);
  
  /* 👔 EXECUTIVE TYPOGRAPHY - АДАПТИВНЫЕ РАЗМЕРЫ */
  --executive-h1-size: clamp(2.5rem, 4vw, 3.2rem);
  --executive-h2-size: clamp(2rem, 3vw, 2.4rem);
  --executive-h3-size: clamp(1.5rem, 2.5vw, 1.8rem);
  --executive-body-large: clamp(1.1rem, 1.5vw, 1.2rem);
  --executive-body-regular: clamp(1rem, 1.2vw, 1.1rem);
  --executive-btn-primary-size: clamp(1rem, 1.3vw, 1.1rem);
  --executive-btn-secondary-size: clamp(0.9rem, 1.1vw, 1rem);
  
  /* 👩‍🏫 УЧИТЕЛЯ - ДОПОЛНИТЕЛЬНЫЕ COMFORT ЭФФЕКТЫ */
  --teacher-pastel-blue: #e3f2fd;
  --teacher-soft-green: #e8f5e8;
  --teacher-warm-yellow: #fff9c4;
  --teacher-lavender: #f3e5f5;
  --comfort-text: #37474f;
  --readable-blue: #1565c0;
  --focus-ring: 0 0 0 3px rgba(25, 101, 192, 0.1);
  --comfort-transition: all 0.2s ease-out;
  --gentle-shadow: 0 2px 8px rgba(55, 71, 79, 0.08);
  --accessibility-contrast: 4.5; /* WCAG AA compliant */
  
  /* 👨‍👩‍👧‍👦 РОДИТЕЛИ - ДОПОЛНИТЕЛЬНЫЕ TRUST ЭФФЕКТЫ */
  --trust-shield-blue: #1565c0;
  --trust-secure-green: #2e7d32;
  --trust-certificate-gold: #ff8f00;
  --institutional-silver: #90a4ae;
  --reliability-gradient: linear-gradient(135deg, #1565c0 0%, #2e7d32 100%);
  --security-border: 2px solid rgba(21, 101, 192, 0.2);
  --certification-shadow: 0 4px 20px rgba(46, 125, 50, 0.15);
  --trust-badge-glow: 0 0 15px rgba(255, 143, 0, 0.4);
  --stability-bg: rgba(248, 250, 252, 0.99);
  
  /* 🎓 УЧЕНИКИ - ДОПОЛНИТЕЛЬНЫЕ MODERN ЭФФЕКТЫ */
  --student-cosmic-purple: #9c27b0;
  --student-cyber-cyan: #00bcd4;
  --student-neon-lime: #cddc39;
  --student-electric-orange: #ff5722;
  --trendy-gradient: linear-gradient(135deg, #9c27b0 0%, #00bcd4 50%, #cddc39 100%);
  --gaming-shadow: 0 0 25px rgba(156, 39, 176, 0.4);
  --neon-border: 1px solid rgba(0, 188, 212, 0.3);
  --rgb-animation: linear-gradient(45deg, #ff0080, #00ff80, #8000ff, #ff0080);
  --holographic-foil: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
}