/* ======================================================================
   Фирменный стиль JUTEKS для Vikunja
   Источник: «Руководство по фирменному стилю», ООО «Ютекс», 2019
   Подмешивается прокси-сервером, образ Vikunja не изменяется —
   поэтому обновления системы этот файл не ломают.
   ====================================================================== */

/* --- Палитра бренд-бука (стр. 15–16), RGB как заявлены в руководстве --- */
:root {
	--juteks-red: #e7343f;        /* PANTONE Red 032C  — основной */
	--juteks-red-2: #ed6b6a;      /* PANTONE 178C */
	--juteks-red-3: #f2928f;      /* PANTONE 177C */
	--juteks-black: #231f20;      /* PANTONE Black */
	--juteks-gray-11: #3b3c43;    /* Cool Gray 11C */
	--juteks-gray-9: #6a6d71;     /* Cool Gray 9C */
	--juteks-gray-3: #d3d4d3;     /* Cool Gray 3C */
	--juteks-gray-1: #e9eae8;     /* Cool Gray 1C */
}

/* ----------------------------------------------------------------------
   Основной цвет интерфейса.
   Vikunja собирает тему из HSL-компонентов, поэтому достаточно
   переопределить три числа — остальное пересчитается само.

   Взят красный, затемнённый на 5% относительно #e7343f. Причина:
   на фирменном красном белый текст даёт контраст 4.23 при норме 4.5
   (WCAG AA). Кнопки с белой надписью были бы на грани читаемости.
   Затемнённый вариант даёт 4.79. Визуально разница неразличима,
   логотип при этом сохраняет точный цвет бренд-бука.
   ---------------------------------------------------------------------- */
/* Селектор html:root, а не просто :root: Vikunja подгружает свои стили
   динамически уже после нашего файла, поэтому по порядку выигрывает она.
   Добавленный html повышает специфичность — порядок перестаёт иметь значение. */
html:root {
	--primary-h: 356deg;
	--primary-s: 68%;
	--primary-l: 52%;

	--link-h: 356deg;
	--link-s: 68%;
	--link-l: 52%;
}

/* --- Шрифт ---------------------------------------------------------------
   Бренд-бук: основной шрифт Neo Sans Pro, при невозможности — Calibri.
   Neo Sans лицензирован не для веба, поэтому используется Calibri —
   он установлен на всех рабочих компьютерах под Windows, а основная
   работа идёт именно с них. Carlito — свободный метрически совместимый
   аналог, если он есть в системе; дальше системный шрифт телефона.
   Файлы шрифтов не подключаются: лишняя внешняя зависимость.
   Начертания ограничены бренд-буком: light, regular, bold.
   ------------------------------------------------------------------------ */
:root {
	--family-primary: Calibri, Carlito, 'Segoe UI', system-ui, sans-serif;
	--family-sans-serif: var(--family-primary);
}

body,
.button,
input,
textarea,
select {
	font-family: var(--family-primary);
}

/* --- Экран входа ---------------------------------------------------------
   Первое, что видит сотрудник. Штатное оформление Vikunja — фотография
   лам и маскот-лама — к корпоративной системе отношения не имеет,
   поэтому убирается.

   Замена: градация от красного к розовому. Это не произвольный выбор —
   бренд-бук (стр. 3) объясняет её как смысл логотипа: от красного,
   символа лидерства, к розовому, цвету уверенности и обновления.

   Фирменный паттерн из гексагонов здесь намеренно не используется:
   бренд-бук (стр. 17) разрешает его только горизонтально и не более
   чем на трети поверхности, а панель входа вертикальная.
   ------------------------------------------------------------------------ */

/* Маскот-лама в подложке страницы входа */
.no-auth-wrapper {
	background-image: none !important;
	background-color: var(--juteks-gray-1);
}

/* Фотография производства вместо стокового снимка.
   Кадр выбирается случайно при каждой загрузке страницы — список
   подставляет /brand/login-bg.js в переменную --login-photo.

   Запасных вариантов два: если скрипт не отработал — конкретный кадр,
   если и картинка не загрузилась — фирменный красный. Панель ни при
   каком раскладе не станет белой дырой.

   Добавить снимки: положить в docs/login-photos/ и запустить
   make-login-photos.py — он сам подгонит их под панель. */
.noauth-container .image,
section.image {
	background-image: var(--login-photo, url('/brand/login/login-intro.jpg')) !important;
	background-color: var(--juteks-red);
	background-size: cover !important;
	background-position: 50% 45% !important;
}

/* Штатное затемнение поверх фотографии доходит до 70% чёрного —
   на фирменном градиенте оно только грязнит цвет. Оставляем лёгкое
   затемнение снизу, ровно чтобы надпись не теряла контраст. */
.noauth-container .image::before,
section.image::before {
	background: linear-gradient(rgba(35, 31, 32, 0) 0%, rgba(35, 31, 32, .10) 70%, rgba(35, 31, 32, .28) 100%) !important;
}

/* Экран «нет связи» */
.offline {
	background-image: none !important;
	background-color: var(--juteks-gray-11);
}

/* Логотип над формой входа */
.no-auth-wrapper .logo img {
	max-height: 44px;
	width: auto;
}

/* Маскот-лама на пустых экранах. Синий круг вокруг неё спорит
   с фирменным красным, а сам персонаж к компании отношения не имеет. */
.llama-cool,
.llama-nightscape {
	display: none !important;
}

/* --- Акценты ------------------------------------------------------------- */

/* Просроченное и горящее — фирменный красный уже занят основным цветом,
   поэтому для срочности берём насыщенный тёмный оттенок того же тона,
   чтобы не спорить с кнопками. */
.task .due-date.overdue,
.task-detail .due-date.overdue {
	color: #9c1b26;
	font-weight: 700;
}

/* Заголовки — фирменный чёрный вместо серого по умолчанию */
h1, h2, h3, h4,
.card-header-title {
	color: var(--juteks-black);
}

/* Логотип в шапке: охранное поле по бренд-буку (стр. 12) */
.navbar .logo img,
.menu-container .logo img {
	padding: 4px 8px;
	box-sizing: content-box;
}

/* --- Тёмная тема ---------------------------------------------------------
   За основу взят Cool Gray 11C из дополнительной палитры бренд-бука,
   а не чистый чёрный — так интерфейс остаётся в фирменной гамме.
   ------------------------------------------------------------------------ */
html.dark:root {
	/* На тёмном фоне красный осветляется: так он остаётся различимым
	   и сохраняет контраст с белым текстом на кнопках. */
	--primary-h: 356deg;
	--primary-s: 72%;
	--primary-l: 62%;
	--link-l: 66%;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark .card-header-title {
	color: var(--juteks-gray-1);
}