/*
 * JUPITER DESIGN — УСІ КОЛЬОРИ В ОДНОМУ МІСЦІ
 * Локально: public/assets/colors.css
 * На хостингу: public_html/assets/colors.css
 *
 * 1. Основна палітра світлої теми — :root нижче.
 * 2. Основна палітра темної теми — html[data-theme="dark"].
 * 3. Детальні відтінки та тіні — у нижніх двох блоках.
 * Змінюйте значення після двокрапки; назви змінних залишайте.
 * Кольори оригінальних зображень і favicon не змінюються.
 */

/* 1. ОСНОВНІ КОЛЬОРИ — СВІТЛА ТЕМА */
:root {
  color-scheme: light;
  --paper: #f7f8fc; /* Основний фон сторінки */
  --white: #fff; /* Фон карток, відгуків і PopUp */
  --ink: #202334; /* Основний текст і темні кнопки */
  --muted: #5d6475; /* Другорядний текст */
  --line: #dce0ed; /* Основні розділювачі та рамки */
  --accent: #5b4fd6; /* Акцент: посилання, іконки, лічильники, CTA */
  --soft: #eef0f8; /* М’який фон допоміжних блоків */
  --dark: #232638; /* Темні акцентні секції */
  --button-hover: #393d55; /* Темна кнопка при наведенні */
  --accent-hover: #493dc0; /* Акцентна кнопка при наведенні */
  --title-muted: #747c91; /* Другий відтінок головного заголовка */
  --success: #246344; /* Успішне надсилання форми */
  --error: #b23b49; /* Помилка форми */
  --on-dark: #fff; /* Світлий текст на темному фоні */
  --button-bg: var(--ink); /* Фон основної кнопки */
  --button-text: var(--on-dark); /* Текст основної кнопки */
  --cta-bg: var(--accent); /* Фон акцентної CTA-кнопки */
  --cta-text: var(--on-dark); /* Текст акцентної CTA-кнопки */
}

/* 2. ОСНОВНІ КОЛЬОРИ — ТЕМНА ТЕМА */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #11131c; /* Основний фон сторінки */
  --white: #1a1d2b; /* Фон карток, відгуків і PopUp */
  --ink: #f1f3fb; /* Основний текст */
  --muted: #b3bbce; /* Другорядний текст */
  --line: #34394d; /* Основні розділювачі та рамки */
  --accent: #b2a6ff; /* Акцент: посилання, іконки, лічильники */
  --soft: #222639; /* М’який фон допоміжних блоків */
  --dark: #181c2b; /* Темні акцентні елементи */
  --button-bg: #e8eaf8; /* Фон основної кнопки */
  --button-text: #202335; /* Текст основної кнопки */
  --button-hover: #d2d7f1; /* Основна кнопка при наведенні */
  --cta-bg: #9282f4; /* Фон акцентної кнопки */
  --cta-text: #14132b; /* Текст акцентної кнопки */
  --accent-hover: #a99aff; /* Акцентна кнопка при наведенні */
  --title-muted: #9ca6c0; /* Другий відтінок головного заголовка */
  --success: #a5d8bb; /* Успішне надсилання форми */
  --error: #ffb5bd; /* Помилка форми */
}

/* 3. ДЕТАЛЬНІ ВІДТІНКИ — СПІЛЬНІ ТА СВІТЛІ */
:root {
  --header-bg: color-mix(in srgb, var(--paper) 97%, transparent);
  --hero-label-bg: var(--white);
  --checkbox-accent: var(--dark);
  --print-paper: #fff;
  --print-ink: #000;
  --selection-bg: #ded9ff; /* Виділення тексту */
  --hero-screen-bg: #e9ecf6; /* Підкладка головного прев’ю */
  --hero-image-bg: #e9ecf6; /* Підкладка зображення головного прев’ю */
  --project-image-bg: #e9ecf6; /* Підкладка картки портфоліо */
  --case-image-bg: #edf0f8; /* Підкладка зображення кейсу */
  --proof-bg: var(--dark); /* Блок досвіду у головному екрані */
  --proof-accent: #c3b9ff; /* Акцент у блоці досвіду */
  --proof-suffix: #c3b9ff; /* Плюс у лічильнику головного екрана */
  --proof-text: #e1e5f5; /* Текст у блоці досвіду */
  --proof-icon: #aeb9df; /* Іконка у блоці досвіду */
  --services-bg: #eef0f8; /* Фон секції послуг */
  --service-bg: var(--paper); /* Фон картки послуги */
  --service-border: #dce0ef; /* Рамка картки послуги */
  --service-hover-bg: var(--white); /* Картка послуги при наведенні */
  --service-hover-border: #a6acd2; /* Рамка послуги при наведенні */
  --why-bg: var(--dark); /* Фон секції переваг */
  --why-text: var(--paper); /* Основний текст секції переваг */
  --why-muted: #bec5dc; /* Вступ секції переваг */
  --why-icon: #adb7d8; /* Іконка секції переваг */
  --why-border: #49516e; /* Розділювачі секції переваг */
  --why-number: #b0bcde; /* Номери переваг */
  --why-copy: #d2d7e7; /* Опис переваг */
  --process-border: #bec5da; /* Розділювачі етапів */
  --tag-border: #ccd2e5; /* Рамки тегів */
  --contact-bg: #e9ecf8; /* Фон секції контактів */
  --messenger-border: #b6bed9; /* Підкреслення месенджерів */
  --contact-icon: #a8b3d4; /* Декоративна іконка контактів */
  --form-bg: var(--white); /* Фон форми */
  --form-border: #d8deee; /* Рамка форми */
  --field-bg: #f8f9fd; /* Фон поля форми */
  --field-border: #cbd2e5; /* Рамка поля форми */
  --field-hover-border: #8c95bc; /* Рамка поля при наведенні */
  --placeholder: #687087; /* Підказка порожнього поля */
  --scope-border: #d6dced; /* Рамка складу послуги */
  --check-border: #d0d7e9; /* Розділювачі списку послуги */
  --detail-bg: var(--white); /* Фон текстових секцій послуг */
  --related-bg: #f0f2f9; /* Фон суміжних послуг */
  --related-border: #c4cce3; /* Розділювачі суміжних послуг */
  --filter-border: #cbd2e6; /* Рамки фільтрів портфоліо */
  --filter-active-bg: var(--ink); /* Активний фільтр портфоліо */
  --filter-active-text: var(--on-dark); /* Текст активного фільтра */
  --project-open-bg: var(--white); /* Кнопка відкриття проєкту */
  --project-open-text: var(--ink); /* Іконка відкриття проєкту */
  --facts-link-border: #aab5d5; /* Підкреслення посилань кейсу */
  --gallery-bg: #edf0f8; /* Фон секції галереї */
  --gallery-card-bg: var(--white); /* Підкладка оригіналу в галереї */
  --gallery-card-border: #d3d9ec; /* Рамка оригіналу в галереї */
  --gallery-dialog-bg: #f5f6fc; /* Фон відкритого зображення */
  --gallery-backdrop: #101222e6; /* Затемнення під галереєю */
  --gallery-toolbar-bg: var(--dark); /* Панель галереї */
  --language-bg: var(--white); /* Меню мов */
  --language-border: var(--line); /* Рамка меню мов */
  --footer-bg: var(--ink); /* Фон підвалу */
  --footer-text: #eef0fa; /* Текст підвалу */
  --footer-border: #454b65; /* Розділювачі підвалу */
  --footer-up-border: #6b7394; /* Рамка кнопки вгору */
  --footer-label: #b3bdd6; /* Підзаголовок підвалу */
  --footer-muted: #c4cbde; /* Нижній текст підвалу */
  --glow: #bac4e943; /* Легке фонове сяйво */
  --grid: #64739b0a; /* Технічна фонова сітка */
  --orb: #a5b0d245; /* Контури фонових орбіт */
  --reviews-scrollbar: #a1abc8; /* Повзунок відгуків */
  --shadow-menu: #20243d16; /* Тінь меню мов */
  --shadow-preview: #20243d0b; /* Тінь головного прев’ю */
  --shadow-form: #20243d06; /* Тінь форми */
  --shadow-nav: #20243d08; /* Тінь мобільного меню */
  --shadow-dialog: #0d102b40; /* Тінь PopUp */
  --dialog-backdrop: #0d102bb8; /* Затемнення під PopUp */
}

/* 4. ДЕТАЛЬНІ ВІДТІНКИ — ПЕРЕВИЗНАЧЕННЯ ДЛЯ ТЕМНОЇ ТЕМИ */
html[data-theme="dark"] {
  --hero-label-bg: var(--soft);
  --checkbox-accent: #b2a6ff;
  --proof-border: #444a69;
  --hero-screen-bg: #24293c; /* Підкладка головного прев’ю */
  --hero-image-bg: #24293c; /* Підкладка зображення головного прев’ю */
  --project-image-bg: #24293c; /* Підкладка картки портфоліо */
  --case-image-bg: #24293c; /* Підкладка зображення кейсу */
  --proof-bg: #252a40; /* Блок досвіду у головному екрані */
  --proof-accent: #c3b9ff; /* Акцент у блоці досвіду */
  --services-bg: #161a28; /* Фон секції послуг */
  --service-bg: #202536; /* Фон картки послуги */
  --service-border: #373f59; /* Рамка картки послуги */
  --service-hover-bg: #292f46; /* Картка послуги при наведенні */
  --service-hover-border: #7773af; /* Рамка послуги при наведенні */
  --why-bg: #10131f; /* Фон секції переваг */
  --why-text: var(--ink); /* Основний текст секції переваг */
  --tag-border: #444d6a; /* Рамки тегів */
  --contact-bg: #1d2235; /* Фон секції контактів */
  --form-bg: #181c2a; /* Фон форми */
  --form-border: #414965; /* Рамка форми */
  --field-bg: #111522; /* Фон поля форми */
  --field-border: #4c5678; /* Рамка поля форми */
  --placeholder: #9ca7c5; /* Підказка порожнього поля */
  --scope-border: #3e4764; /* Рамка складу послуги */
  --check-border: #3e4764; /* Розділювачі списку послуги */
  --detail-bg: #151927; /* Фон текстових секцій послуг */
  --related-bg: #161a28; /* Фон суміжних послуг */
  --filter-border: #4c5678; /* Рамки фільтрів портфоліо */
  --filter-active-bg: #dedff8; /* Активний фільтр портфоліо */
  --filter-active-text: #1b2030; /* Текст активного фільтра */
  --project-open-bg: #dedff8; /* Кнопка відкриття проєкту */
  --project-open-text: #1b2030; /* Іконка відкриття проєкту */
  --gallery-bg: #181d2d; /* Фон секції галереї */
  --gallery-card-bg: #252b40; /* Підкладка оригіналу в галереї */
  --gallery-card-border: #404a69; /* Рамка оригіналу в галереї */
  --gallery-dialog-bg: #181c2a; /* Фон відкритого зображення */
  --gallery-toolbar-bg: #101421; /* Панель галереї */
  --language-bg: #202538; /* Меню мов */
  --language-border: #424b69; /* Рамка меню мов */
  --footer-bg: #0e111c; /* Фон підвалу */
  --glow: #7d7bd529; /* Легке фонове сяйво */
  --grid: #a9b7eb09; /* Технічна фонова сітка */
  --orb: #858fc03b; /* Контури фонових орбіт */
}