Задача: доработка CSS тем (Light/Dark)

Необходимо аккуратно отредактировать файлы стилей существующего проекта с фиксированной структурой HTML. Внедрять новые элементы, логику и менять разметку категорически запрещено. Основная цель - избавиться от визуального шума и создать чистую, гармоничную и профессиональную цветовую схему, одинаково качественно работающую как в светлом, так и в темном режиме.

Исходная ситуация и проблемы

  • Реализована смешанная зелено-мятная палитра, дизайн выглядит недоработанным.
  • Элементы страницы выглядят «блекло» или чрезмерно пестро, отсутствует баланс контрастов.
  • Присутствует избыточный эффект glassmorphism (стекла/размытия), который местами ухудшает читаемость текста и выглядит как визуальный мусор.
  • Главное противоречие: светлая и темная темы не воспринимаются как два варианта одного дизайна - наблюдаются разные «языки» оформления, что создает эффект самодельного сайта.
  • Размыты границы между фоном страницы, карточками секциями - интерфейс «схлопывается» из-за отсутствия правильных многослойных теней либо отступов.

Требования к итоговому результату

1. Единый цветовой канон

  • Провести инвентаризацию уже используемых CSS-переменных (цвета, градиенты, свечения). Привести всё к 5-6 общим тонам (база, акцент, второй акцент, текст, задний план), соблюдать иерархию контрастов.
  • Избавиться от крикливости/недостаточной насыщенности; следить, чтобы белый и черный без полутонов не били по глазам (использовать off-white или semi-black/soft grey).

2. Нормализация точной высоты плоскости (фон / блок / карточка)

  • Каждый уровень: панель страницы > секция > блок карточки > второстепенный инпут получают строгую разницу в яркости (в светлой теме) и тоне (в темной). Работа именно через CSS-переменные.
  • Поля, отступы, границы (при наличии) - стандартные слоты шаблона должны строго задаваться из CSS без перебивки в HTML.

3. Светлая и темная тема - идентичный визуальный стиль

  • При переключении пользователь ощущает: «включились лампочки - выключились, остаётся та же айдентика бренда». Исправить: если на лайт теме текст на кнопке - приглушенный оттенок, в dark он должен аналогично выглядеть логично и законченно (а не как инвертированный хаос).

4. Умеренность в «glass-эффекте»

  • Blur/frost можно использовать лишь для трубок стаканов (если они есть) или выпадающих подсказок, иных наложений.
  • Карточки, футер, подложки сложных блоков : если glss накладывается поверх текста и портит читаемость - сде лать полускрытный платный цвет фона без свечения или с фильтром.

5. Адаптивность

  • Ни один стиль (размытия/залипучие карточек fixed) не должны нарушать положение блока на экране телефона или планшета. Переменная маскирует блок полной те - нельзя добавить absolute absolute)

Дополнительно

  • Предотвращения) в видение (из скриншота будут/ «серым болото». то почему суг готовая часть стилей видилась беловой - затем) немного тона стен здесь добавка - цвета делаем новости детали+), чуше в одну там инверсии палитр обговорить!
  • Замена конечный реализация где замечены). Улучшение оставить стек бок за работ плашку треуют заявки фон лчч даже фоновикала -.

P.S. Обязательное уточнение

Дополнительно - логики /диаграграмма/ в рабочем fl0 документа зака (сщиб поста про код) внешний л рас.