/* ТЕМНАЯ ТЕМА */
:root {
   --primary: hsl(199, 89%, 48%);
   /* --secondary: #215a88;  background Секций */
   --secondary: hsl(207, 61%, 45%);  /* background Секций */
   --third: #1b4375; 
   
   --accent: #ffbb00;    /* Теплый желтый акцент */
   
   --clr-white: #fefefe; /* почти белый */
   --clr-black: #111;

   --bg-body: #f8fdff;   /* Очень светлый голубоватый фон */
   --bg-gray: #dddddd;   /* СЕРЫЙ */

   --text-dark: #2c3e50;
   --text-light: #f0f0f0;

    /* адаптация цвета текста под темный/светлый стиль сайта */
   --clr-text-regular: var(--text-light);
   --clr-text-regular-inverted: var(--text-dark);


   --shadow-soft: 0 10px 30px rgba(0, 168, 232, 0.2);
   --shadow-hover: 0 15px 30px rgba(23, 161, 216, 0.4);
      

   --gold: #e8b84b;
   --golden-rod: #786414;
   --golden-rod-hover: hsl(48, 49%, 45%); /* при наведении */


   --bg-dark: #0a101e; /* Глубокий темный */
   --text-main: #e2e8f0;     /* Светло-серый текст */

   --glass: rgba(255, 255, 255, 0.03);
   --border: oklch(from var(--third) calc(l + 0.25) c h); /* рассчитать на 25% ярче */
   
   --tbl-border: var(--third);



   /* СТИЛИ ЗАГОЛОВКОВ */
         /* Размеры */
   --fs-h1: 3.0rem;
   --fs-h2: 2.2rem;
         /* Цвета */
   --clr-h1: var(--text-light);
   --clr-h2: hsl(33, 100%, 78%); /* bisque на 10% темнее */
   --clr-h3: bisque;
   --clr-h4: bisque;


   /* --clr-tab-link: var(--text-light); */
   --clr-tab-link-active: var(--text-light);

   --clr-steps-section-title: var(--text-dark);

   /* Sidebar */
   --sidebar-width: 250px;
   --clr-sidebar: var(--third);
   --clr-sidebar-font: var(--text-light);
   --clr-sidebar-active-font: var(--text-light);

   /* Callback Bar */
   --clr-bg-callbackbar: linear-gradient(90deg, #1e293b, #273b69);

   /* КНОПКИ */
   --clr-bg-btn: var(--third);
   --clr-btn-outline: var(--clr-secondary);
   --clr-btn-text: var(--clr-text-regular);
   /* --clr-bg-btn: linear-gradient(135deg, var(--primary), #0284c7); */

   
   --clr_hero-p: var(--clr-text-regular);

   --clr-group-card: var(--third);
   --clr-group-card-hover: var(--golden-rod-hover);
   --clr-group-card-text: var(var(--text-light));



   /* НАШИ УСЛУГИ */
   --clr-services-item: var(--clr-group-card);
   /* --clr-services-item: hsl(48, 30%, 28%); */

   /* FOOTER */
   --clr-footer: var(--clr-sidebar);

   
   /* Карточки товаров в Каталоге*/
   /* --clr-product-card-link: var(--text-dark);
   --clr-product-card-link-hover: var(--golden-rod-hover); */


/* ЦВЕТ ДЛЯ КАРТОЧЕК ТОВАРОВ */
   /* БЕЛЫЙ цвет карточек */
   --bg-card: oklch(from var(--clr-white) calc(l - 0.1) c h);
   --clr-item-name: oklch(from var(--bg-card) calc(l - 0.9) c h); 

   --clr-short-desc: oklch(from var(--clr-white) calc(l - 0.1) c h);


   /*СИНИЙ цвет карточек - не понравился*/
   /* --bg-card: hsl(213, 64%, 31%);
   --clr-item-name: oklch(from var(--bg-card) calc(l + 0.9) c h); */


   --item-desc-short: var(--clr-item-name); 
   --item-specs: var(--item-desc-short); 

   --clr-text-hover: var(--text-light);
   --clr-price: var(--golden-rod-hover);


   /* переменная с градиентами, имитирующими светлые круги - Glow эффект  */
  --bg-img: 
    radial-gradient(circle at 23% 22%, rgba(255, 255, 255, 0.1) 0%, transparent 11%),
    radial-gradient(circle at 5% 70%, rgba(255, 255, 250, 0.1) 0%, transparent 12%),
    radial-gradient(circle at 90% 23%, hsla(0, 0%, 100%, 0.2) 0%, transparent 9%),
    radial-gradient(circle at 70% 20%, hsla(197, 100%, 45%, 0.3) 0%, transparent 12%),
    radial-gradient(circle at 85% 65%, hsla(0, 0%, 100%, 0.2) 0%, transparent 12%);
}


   /* ОБРАЗЕЦ ПЕРЕСЧЕТА ЯРКОСТИ: --border: oklch(from var(--third) calc(l + *0.25) c h); /* рассчитать на 25% ярче */