/* variables.css */
:root {
  color-scheme: light;
  --color-panel-bg: #fdfdfdff;                 /* светло-бежевый фон панели */
  --color-hover: #eeede8ff;
  --color-hover-panel: rgb(247, 246, 245);
  /*--color-text: rgb(207, 0, 21);*/                     /* основной цвет текста */
  --color-text: #224156ff;                    /* основной цвет текста */
  --color-text-secondary: #000000ff;              /* текст-пояснение (например, перевод) */
  --color-white: #ffffff;
  
  --color-button-gray: #eeede8ff;  
  --color-button-mint: #aae7e4ff;  
  --color-button-lightgreen: #bbf1caff;  
  --color-button-yellow: rgb(252, 235, 163);  
  --color-button-orange: #f9d6a1ff;  
  --color-button-orange66: #f9d6a1;  
  --color-button-pink: #f5c0caff; 
  --color-button-pink-min: rgb(248, 238, 240);  
  --color-button-purple: #c8c9fbff;  

  --color-panel-purple: rgb(225, 226, 251);  
  --color-panel-text-purple: rgb(152, 154, 224); 

  --color-button-text-transparent: rgb(191, 188, 175);  
  --color-button-text-gray: rgb(168, 167, 155);  
  --color-button-text-mint: #28615fff;  
  --color-button-text-lightgreen: #366f40ff;  
  --color-button-text-yellow: rgb(255, 198, 9);  
  --color-button-text-orange: rgb(250, 147, 21);  
  --color-button-text-pink: #802c35ff;  
  --color-button-text-purple: rgb(63, 66, 147);  
 
  --color-button-shadow-transparent: #eeede8ff;  
  --color-button-shadow-gray: #eeede8ff;  
  --color-button-shadow-mint: rgb(125, 198, 194);  
  --color-button-shadow-lightgreen: rgb(89, 184, 107);  
  --color-button-shadow-yellow: #f8cd46ff;  
  --color-button-shadow-orange: rgb(185, 121, 43);  
  --color-button-shadow-pink: rgb(190, 66, 78);  
  --color-button-shadow-purple: rgb(74, 77, 176);  

  --color-shadow: rgba(0, 0, 0, 0.1);         /* мягкая тень */
  --color-shadow-strong: rgba(0, 0, 0, 0.3);  /* сильная тень (модалки) */



  --color-light-blue: #cae7fb;               /* светло-голубой фон блоков */
  --color-blue: #3498db;                     /* основной голубой */
  --color-blue-hover: #2997e0;               /* наведение на голубую кнопку */
  --color-text-secondary: #555;              /* текст-пояснение (например, перевод) */
  --color-border: #ccc;                      /* нейтральные рамки */
  --color-border-light: #ddd;                /* светлые рамки */
  --color-border-strong: #aaa;               /* ярко-серые рамки */
  --color-muted: #999999;                    /* троеточия, неактивные элементы */
  --color-error: red;                        /* ошибки */
  --color-success: green;                    /* правильный ответ */
  --color-bg-light: #f3f9fc;                 /* общий светлый фон */
  --color-panel-light: #f9f9f9;              /* фон блоков и панелей */
  --color-panel-muted: #eef7ff;              /* фон под волной */
  --color-shadow: rgba(0, 0, 0, 0.1);         /* мягкая тень */
  --color-shadow-strong: rgba(0, 0, 0, 0.3);  /* сильная тень (модалки) */
  --color-overlay: rgba(0, 0, 0, 0.4);        /* затемнение фона */
  --color-overlay-dark: rgba(0, 0, 0, 0.7);   /* тёмное затемнение */
  --color-accent: #f9ebaf;                   /* жёлтая кнопка */
  --color-accent-hover: #f9e26d;             /* при наведении на жёлтую */
  --color-highlight: #ffd54f;                /* выделение слова */
  /* --color-hover-panel: #e8e8e8;              наведение на фейковую кнопку */
  --color-focus-blue: #4da1d9;               /* синие кнопки в index */
  --color-focus-blue-hover: #45aef3;         /* hover для index */
  --color-topbar: #2c3e50;                   /* фон верхней панели */
  --color-header-text: #1e4870;              /* сине-серый текст */
  --color-line: #eee;                        /* тонкая светлая линия */
  --color-tooltip-bg: #333;                  /* фон всплывающей подсказки */
  --color-tooltip-text: #fff;                /* текст во всплывашке */
  --color-active-row: #e6f7ff;               /* активная строка в таблице */
  --color-active-border: #1890ff;            /* синяя полоса в активной строке */
  --color-yellow-bg: #f8ec93;                /* фон в главной (index) */
  --color-grey-light: #f8f9fa;               /* левая панель index */
  --color-grey-hover: #bdbdbd;               /* hover для разделителя */
  --color-grey: #e0e0e0;                     /* серый фон и разделители */
  --color-focus-border: #b0c4d8;             /* рамка текстового поля */

  /* ========== ЦВЕТА ДЛЯ НАСТРОЕК АУДИО ========== */
  
  /* Фиолетовая группа - режим "весь файл" */
  --color-audio-purple-primary: #c9b3fc;     /* основной фиолетовый */
  --color-audio-purple-secondary: #9885b8;   /* темный фиолетовый */
  --color-audio-purple-light: rgba(201, 179, 252, 0.1);   /* светлый фиолетовый фон */
  --color-audio-purple-medium: rgba(201, 179, 252, 0.2);  /* средний фиолетовый */
  
  /* Бежевая группа - режим "предложение" */
  --color-audio-beige-primary: #d4a574;      /* основной бежевый */
  --color-audio-beige-secondary: #c49660;    /* темный бежевый */
  --color-audio-beige-light: rgba(212, 165, 116, 0.1);   /* светлый бежевый фон */
  --color-audio-beige-medium: rgba(212, 165, 116, 0.2);  /* средний бежевый */
  
  /* Оранжевая группа - режим "микрофон" */
  --color-audio-orange-primary: #f59e0b;     /* основной оранжевый */
  --color-audio-orange-secondary: #d97706;   /* темный оранжевый */
  --color-audio-orange-light: rgba(245, 158, 11, 0.1);   /* светлый оранжевый фон */
  --color-audio-orange-medium: rgba(245, 158, 11, 0.2);  /* средний оранжевый */
}