/* ============================================================================
nt-theme-light.css — СВЕТЛАЯ ТЕМА NAZAROFF («NT Paper»)
============================================================================
ПРИНЦИП: ни одного нового правила вёрстки. Только переопределение токенов.
Вся существующая вёрстка, построенная на var(--nt-*), переключается сама.
ПОДКЛЮЧЕНИЕ: после nt-theme.css
Переключение: атрибут на → data-theme="light" | "dark"
ВСЕ ПАРЫ ПРОВЕРЕНЫ НА КОНТРАСТ (WCAG AA, минимум 4.5:1 для текста).
============================================================================ */
/* ---------------------------------------------------------------------------
1. СВЕТЛАЯ ТЕМА — переопределение токенов
--------------------------------------------------------------------------- */
html[data-theme="light"] {
/* --- Поверхности --------------------------------------------------------
Не чистый белый: тёплая бумага. Сохраняет премиальность бренда и
не бьёт по глазам, как #FFFFFF. */
--nt-bg: #F7F4EF; /* фон страницы — тёплая бумага */
--nt-bg-elev: #FFFFFF; /* приподнятые поверхности (шапка, модалки) */
--nt-bg-card: #FFFFFF; /* карточки */
--nt-bg-card-2: #F1ECE4; /* утопленные блоки, полосы прогресса */
/* --- Линии --------------------------------------------------------------
В тёмной теме линии светлые полупрозрачные, здесь — тёмные. */
--nt-line: rgba(26,31,40,.10);
--nt-line-strong: rgba(26,31,40,.17);
/* --- Текст (все ≥4.5:1) -------------------------------------------------- */
--nt-txt: #1A1F28; /* 15.07:1 — основной */
--nt-txt-dim: #4E5661; /* 6.77:1 — вторичный */
--nt-txt-faint: #636A75; /* 4.97:1 — подписи (в тёмной теме был светлее) */
/* --- ЗОЛОТО: ключевое место темы ----------------------------------------
ВАЖНО: фирменный #D4A574 на светлом фоне даёт контраст всего 2.1:1
при норме 4.5:1 — как ТЕКСТ он нечитаем. Поэтому золото расщеплено:
--nt-gold → золото-ЧЕРНИЛА: текст, иконки, тонкие линии (4.74:1)
--nt-gold-fill → золото-ЗАЛИВКА: фон кнопок, плашки (бренд сохранён)
Кнопка «золотой фон + тёмный текст» работает в ОБЕИХ темах (8.33:1),
поэтому заливка остаётся фирменной и узнаваемой. */
--nt-gold: #8F6432; /* 4.74:1 — читаемое золото для текста */
--nt-gold-soft: #A6763F; /* мягкий акцент (крупный текст, иконки) */
--nt-gold-deep: #6B4A20; /* усиленный: 7.55:1, для важного текста */
--nt-gold-fill: #D4A574; /* ЗАЛИВКА — фирменный, не менять */
--nt-gold-bg: rgba(143,100,50,.06);
--nt-gold-bg-2: rgba(143,100,50,.13);
/* --- Семантические (все ≥4.5:1 на светлом) ------------------------------- */
--nt-info: #3D6D96; /* 5.00:1 */
--nt-ok: #4A7A43; /* 4.61:1 */
--nt-warn: #8A6A15;
--nt-danger: #9E3D3E; /* 6.00:1 */
--nt-ok-bg: rgba(74,122,67,.10);
--nt-ok-line: rgba(74,122,67,.30);
--nt-danger-bg: rgba(158,61,62,.09);
--nt-danger-line: rgba(158,61,62,.25);
/* --- Тени ----------------------------------------------------------------
В тёмной теме тень «проваливает» элемент, в светлой — приподнимает.
Прежние чёрные тени на светлом фоне выглядят грязно. */
--nt-shadow: 0 24px 64px -28px rgba(26,31,40,.22);
--nt-shadow-sm: 0 8px 24px -12px rgba(26,31,40,.16);
color-scheme: light; /* нативные скроллбары/поля ввода станут светлыми */
}
html[data-theme="dark"] { color-scheme: dark; }
/* ---------------------------------------------------------------------------
2. ТОЧЕЧНЫЕ ПОПРАВКИ
Немногие места, где одной сменой токена не обойтись.
--------------------------------------------------------------------------- */
/* 2.1. Кнопка с золотой заливкой — фирменный цвет в обеих темах.
(в тёмной теме --nt-gold-fill не определён, поэтому fallback на --nt-gold) */
.nt-btn-gold {
background: var(--nt-gold-fill, var(--nt-gold));
color: #1A1206;
}
.nt-btn-gold:hover {
background: var(--nt-gold-soft-fill, #E8C9A0);
}
html[data-theme="light"] .nt-btn-gold:hover { background: #E0B183; }
/* 2.2. Золотые плашки/бейджи с заливкой — та же логика */
html[data-theme="light"] .nt-status-badge,
html[data-theme="light"] .pn-founder-rank,
html[data-theme="light"] .nt-sim-cta__tag {
background: var(--nt-gold-fill);
color: #1A1206;
border-color: transparent;
}
/* 2.3. Радиальные «свечения», рассчитанные на тёмный фон.
На светлом они дают грязное пятно — гасим прозрачность. */
html[data-theme="light"] .pn-hero::before,
html[data-theme="light"] .pn-founder-glow,
html[data-theme="light"] .codex-hero::before {
opacity: .35;
}
/* 2.4. Фото основателя в Пантеоне: свечение под светлый фон */
html[data-theme="light"] .pn-founder-photo {
box-shadow: 0 10px 30px -10px rgba(143,100,50,.35);
}
/* 2.5. Инпуты и селекты — нативный вид под тему */
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select {
background: var(--nt-bg-card);
color: var(--nt-txt);
border-color: var(--nt-line-strong);
}
/* 2.6. Сертификаты NT-A / NT-M остаются ТЁМНЫМИ всегда.
Это документ с фирменным оформлением и печатью — он не должен «мигать»
вместе с интерфейсом, и его печатают/скачивают. */
.certificate-page,
.cert-wrap,
.nt-certificate {
--nt-bg: #0A0E14;
--nt-bg-elev: #11161F;
--nt-bg-card: #141A24;
--nt-bg-card-2: #0E131B;
--nt-txt: #F4F2ED;
--nt-txt-dim: #9BA1AC;
--nt-txt-faint: #5C636E;
--nt-gold: #D4A574;
--nt-gold-soft: #E8C9A0;
--nt-gold-deep: #B8895A;
--nt-line: rgba(255,255,255,.07);
--nt-line-strong: rgba(255,255,255,.12);
}
/* ---------------------------------------------------------------------------
3. ПЕРЕКЛЮЧАТЕЛЬ (компонент)
--------------------------------------------------------------------------- */
.nt-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid var(--nt-line-strong);
background: transparent;
color: var(--nt-txt-dim);
cursor: pointer;
padding: 0;
flex-shrink: 0;
transition: color var(--nt-dur) var(--nt-ease),
border-color var(--nt-dur) var(--nt-ease),
background var(--nt-dur) var(--nt-ease);
}
.nt-theme-toggle:hover {
color: var(--nt-gold);
border-color: var(--nt-gold-deep);
background: var(--nt-gold-bg);
}
.nt-theme-toggle svg {
width: 17px; height: 17px;
stroke: currentColor; fill: none;
stroke-width: 1.7;
stroke-linecap: round; stroke-linejoin: round;
}
/* Показываем нужную иконку: в тёмной теме — солнце (предложение включить свет) */
.nt-theme-toggle .icon-sun { display: none; }
.nt-theme-toggle .icon-moon { display: block; }
html[data-theme="dark"] .nt-theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .nt-theme-toggle .icon-moon { display: none; }
/* ---------------------------------------------------------------------------
4. ПЛАВНОСТЬ ПЕРЕКЛЮЧЕНИЯ
Класс вешается на только на время смены темы (см. JS), чтобы
переход не тормозил обычную анимацию интерфейса.
--------------------------------------------------------------------------- */
html.nt-theme-switching,
html.nt-theme-switching * {
transition: background-color .28s ease,
border-color .28s ease,
color .28s ease !important;
}
/* Уважаем системную настройку «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
html.nt-theme-switching,
html.nt-theme-switching * { transition: none !important; }
}
/* ---------------------------------------------------------------------------
5. ПЕЧАТЬ — всегда светлая (экономия тонера, читаемость)
--------------------------------------------------------------------------- */
@media print {
html, html[data-theme="dark"] {
--nt-bg: #FFFFFF; --nt-bg-elev: #FFFFFF;
--nt-bg-card: #FFFFFF; --nt-bg-card-2: #F5F5F5;
--nt-txt: #000000; --nt-txt-dim: #333333; --nt-txt-faint: #555555;
--nt-gold: #6B4A20; --nt-line: #DDDDDD; --nt-line-strong: #BBBBBB;
}
.nt-theme-toggle { display: none; }
}