/* Токены единого стиля «Педагог-психолог».
 *
 * Один источник цветов, шрифтов, размеров и отступов для всего, что видит
 * специалист: лендинг кабинета, магазин материалов, личный кабинет, экраны
 * расчётчиков и выводимые протоколы. Компоненты (components.css), тема
 * (style.css, shop.css) и протоколы (report.css) берут значения только
 * отсюда — иначе через полгода у каждого расчётчика окажется «свой синий».
 *
 * Базовые цвета совпадают с Социометрией: покупатель переходит между
 * площадками и не должен чувствовать, что попал на чужой сайт.
 * Описание и правила — docs/Единый стиль.md. */

:root {
	/* ——— Поверхности и текст ——— */
	--bg:          #F2F4F7;
	--surface:     #FFFFFF;
	--surface-2:   #E8EBF0;
	--ink:         #171B21;
	--muted:       #5C6470;
	--line:        #DBE0E6;

	/* ——— Действие и акцент ———
	   Чернильно-синий — только для действий и выбранного состояния,
	   охра — для акцентов («чаще выбирают», маркеры списков). */
	--primary:     #33415C;
	--primary-ink: #F2F4F7;
	--accent:      #E2A33B;
	--accent-ink:  #211405;

	/* ——— Состояния интерфейса ——— */
	--ok:          #3F8C6E;
	--ok-soft:     #E3F0E9;
	--danger:      #C2503C;
	--danger-soft: #F7E4E0;
	--warn:        #A86F14;
	--warn-soft:   #FBF0DC;
	--info:        #33415C;
	--info-soft:   #E6EAF1;

	/* ——— Уровни результатов ———
	   Семантика, а не «высокий/низкий»: у тревожности высокий уровень —
	   повод обратить внимание, у готовности к школе — наоборот. Методика
	   сама сопоставляет свои уровни с тоном (docs/Единый стиль.md, «Уровни»).
	   Цвет — только подсказка: в протоколе рядом всегда стоит название
	   уровня и значок формы, а в печати — штриховка. */
	--level-ok:        #3F8C6E;  /* благоприятный */
	--level-ok-soft:   #E3F0E9;
	--level-neutral:   #6B7F92;  /* средний, в пределах возрастной нормы */
	--level-neutral-soft: #E9EDF1;
	--level-watch:     #C98A1E;  /* обратить внимание */
	--level-watch-soft: #FBF0DC;
	--level-alert:     #C2503C;  /* требует внимания специалиста */
	--level-alert-soft: #F7E4E0;
	--level-none:      #AEB6C1;  /* нет данных, не рассчитано */
	--level-none-soft: #F0F2F5;
	/* Текст на мягком фоне плашки: темнее самого тона, чтобы контраст
	   с фоном держал AA при мелком кегле */
	--level-ok-ink:      #2B6650;
	--level-neutral-ink: #465666;
	--level-watch-ink:   #7A5210;
	--level-alert-ink:   #9A3A28;
	--level-none-ink:    #5C6470;

	/* ——— Ряды диаграмм: сравнение замеров «осень / весна» ——— */
	--series-1: #9AAAC2;  /* первый замер — светлее, «было» */
	--series-2: #33415C;  /* второй замер — насыщеннее, «стало» */
	/* Штриховка поверх столбцов: на экране едва заметна, в печати — чёрная */
	--chart-hatch: rgba(255, 255, 255, .4);
	--chart-grid:  #DBE0E6;

	/* ——— Тени и фокус ——— */
	--shadow:      0 1px 2px rgba(23, 27, 33, .06), 0 10px 28px rgba(23, 27, 33, .06);
	--focus-ring:  0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);

	/* ——— Шрифты ———
	   Manrope — заголовки и кнопки, Inter — текст, JetBrains Mono —
	   служебные подписи (адрес, раздел, единицы), Sora — цены и крупные
	   числа: её цифры выше и уже, и сумма читается как число. */
	--font-head: "Manrope", system-ui, sans-serif;
	--font-body: "Inter", system-ui, sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, monospace;
	--font-num:  "Sora", "Manrope", system-ui, sans-serif;

	/* ——— Кегли ——— */
	--fs-mono:  11px;    /* моноширинные подписи */
	--fs-xs:    12px;    /* сноски, подписи к диаграммам */
	--fs-sm:    13px;    /* второстепенный текст карточек */
	--fs-ui:    14px;    /* поля, таблицы интерфейса */
	--fs-body:  15px;    /* основной текст */
	--fs-lead:  16.5px;  /* лид первого экрана */
	--fs-h3:    16.5px;
	--fs-h2:    21px;
	--fs-h1:    clamp(26px, 4vw, 38px);
	--fs-hero:  clamp(28px, 4.4vw, 44px);
	--fs-price: 26px;

	/* ——— Отступы: шаг 4 px ——— */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-7: 32px;
	--space-8: 44px;

	/* ——— Скругления ——— */
	--radius-xs:   4px;   /* код, отметки в тексте */
	--radius-sm:   6px;   /* кнопки, поля */
	--radius-md:   8px;   /* обложки, строки, плашки */
	--radius:      10px;  /* карточки */
	--radius-pill: 99px;  /* чипсы, метки */

	/* ——— Сетка ———
	   Шире, чем у Социометрии: в каталоге четыре плитки в ряд */
	--wrap:   1160px;
	--gutter: 20px;

	color-scheme: light;
}

@media (max-width: 480px) { :root { --gutter: 16px; } }

/* Тёмная тема идёт за системной настройкой, но её можно перебить вручную,
   поставив на <html> атрибут data-theme. Значения повторены дважды — для
   системной настройки и для ручного выбора: CSS не умеет объединить
   медиазапрос и селектор атрибута в одно правило. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg:          #14171C;
		--surface:     #1B1F26;
		--surface-2:   #20242C;
		--ink:         #EDEFF3;
		--muted:       #9AA2AF;
		--line:        #2C313A;
		--primary:     #8CA3C6;
		--primary-ink: #14171C;
		--accent:      #E8B563;
		--accent-ink:  #211405;
		--ok:          #6FBF9E;
		--ok-soft:     #1E2C26;
		--danger:      #E58B76;
		--danger-soft: #34221E;
		--warn:        #E8B563;
		--warn-soft:   #30281A;
		--info:        #8CA3C6;
		--info-soft:   #202733;

		--level-ok:        #6FBF9E;
		--level-ok-soft:   #1E2C26;
		--level-neutral:   #93A5B8;
		--level-neutral-soft: #222831;
		--level-watch:     #E8B563;
		--level-watch-soft: #30281A;
		--level-alert:     #E58B76;
		--level-alert-soft: #34221E;
		--level-none:      #5C6470;
		--level-none-soft: #20242C;
		--level-ok-ink:      #8FD3B6;
		--level-neutral-ink: #B5C3D1;
		--level-watch-ink:   #F0CB8C;
		--level-alert-ink:   #F0AA9A;
		--level-none-ink:    #9AA2AF;

		--series-1: #56657C;
		--series-2: #8CA3C6;
		--chart-hatch: rgba(0, 0, 0, .35);
		--chart-grid:  #2C313A;

		--shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .4);

		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg:          #14171C;
	--surface:     #1B1F26;
	--surface-2:   #20242C;
	--ink:         #EDEFF3;
	--muted:       #9AA2AF;
	--line:        #2C313A;
	--primary:     #8CA3C6;
	--primary-ink: #14171C;
	--accent:      #E8B563;
	--accent-ink:  #211405;
	--ok:          #6FBF9E;
	--ok-soft:     #1E2C26;
	--danger:      #E58B76;
	--danger-soft: #34221E;
	--warn:        #E8B563;
	--warn-soft:   #30281A;
	--info:        #8CA3C6;
	--info-soft:   #202733;

	--level-ok:        #6FBF9E;
	--level-ok-soft:   #1E2C26;
	--level-neutral:   #93A5B8;
	--level-neutral-soft: #222831;
	--level-watch:     #E8B563;
	--level-watch-soft: #30281A;
	--level-alert:     #E58B76;
	--level-alert-soft: #34221E;
	--level-none:      #5C6470;
	--level-none-soft: #20242C;
	--level-ok-ink:      #8FD3B6;
	--level-neutral-ink: #B5C3D1;
	--level-watch-ink:   #F0CB8C;
	--level-alert-ink:   #F0AA9A;
	--level-none-ink:    #9AA2AF;

	--series-1: #56657C;
	--series-2: #8CA3C6;
	--chart-hatch: rgba(0, 0, 0, .35);
	--chart-grid:  #2C313A;

	--shadow:      0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px rgba(0, 0, 0, .4);

	color-scheme: dark;
}

/* Печать всегда светлая и без теней, какой бы ни была тема на экране:
   протокол уходит на педсовет на белом листе, часто на чёрно-белом принтере. */
@media print {
	:root,
	:root[data-theme="dark"],
	:root:not([data-theme="light"]) {
		--bg:          #FFFFFF;
		--surface:     #FFFFFF;
		--surface-2:   #F2F2F2;
		--ink:         #000000;
		--muted:       #444444;
		--line:        #999999;
		--primary:     #000000;
		--primary-ink: #FFFFFF;
		--shadow:      none;
		--chart-hatch: #000000;
		--chart-grid:  #BBBBBB;
		color-scheme: light;
	}
}