/* ============================================================
   ТЕМА «PROOF LIGHT» (Схема B) — светлая печатная студия.
   Аддитивный слой: активируется только при html[data-theme='light'].
   Тёплая «бумага», navy-акцент, bento-тактильность (мягкие тени,
   скругления). Логику/рендер/API не трогает.
   ============================================================ */

/* ---- Токены темы (тёплая бумага + печатный navy) ---- */
html[data-theme='light'] {
  --bg-primary: #f6f5f1; /* тёплый «бумажный» рабочий стол */
  --bg-secondary: #ffffff; /* панели */
  --bg-tertiary: #f1efe9; /* инпуты/карточки */
  --bg-hover: #ecebe4;
  --bg-active: #e3e1d8;

  --accent: #1e3a5f; /* печатный navy */
  --on-accent: #ffffff; /* см. пояснение у токена в style.css */
  --accent-hover: #274b79;
  --accent-dim: rgba(30, 58, 95, 0.1);
  --accent-grad: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);

  --text-primary: #1a1c22;
  --text-secondary: #4b5563;
  /* ЗНАЧЕНИЕ ВЕРНУЛОСЬ ПОСЛЕ ЛОЖНОЙ ТРЕВОГИ — И ЭТО СТОИТ ЗАПОМНИТЬ (2026-08-22).
     Утром я «починил» этот серый на `#656c7a`, объявив, что прежний давал 4.43:1 и не
     проходил норму. Обвинение было НЕВЕРНЫМ: мой замер искал подложку по `background-color`,
     а поверхность меню рисуется ГРАДИЕНТОМ (`background-image`) — поиск проскакивал меню и
     сравнивал текст с фоном где-то дальше. Переписав замер на настоящие пиксели, получил
     честные числа: `#6b7280` даёт 4.71:1 на живой поверхности меню, то есть проходит.
     Комментарий, который я назвал лживым, был прав.
     Возвращаю исходное значение: правки палитры без дефекта — это чужой вкус, изменённый по
     ошибке. Правило на будущее: подложку брать ПИКСЕЛЕМ со снимка, а не выводить из стилей;
     градиент, матовое стекло и цветная пилюля из стилей не читаются. */
  --text-muted: #6b7280; /* 4.71:1 на живой поверхности меню — измерено пикселями */

  --border: #e4e0d6;
  --border-light: #cec8ba;

  --warning: #b45309;
  --error: #dc2626;
  --success: #047857;

  --shadow-sm: 0 1px 2px rgba(30, 40, 60, 0.08);
  --shadow-md: 0 6px 18px rgba(30, 40, 60, 0.1);
  --shadow-lg: 0 20px 50px rgba(30, 40, 60, 0.18);

  /* МЯГКИЙ РЕЛЬЕФ В СВЕТЛОЙ ТЕМЕ — здесь он ближе всего к примеру заказчика: блик белый и
     заметный, тень холодная серо-синяя, как у неоморфизма. Ровно те же имена токенов, поэтому
     разметка и компоненты одни на обе темы. */
  --nm-hi: rgba(255, 255, 255, 0.95);
  --nm-lo: rgba(163, 177, 198, 0.55);
  --nm-out: -4px -4px 9px var(--nm-hi), 4px 4px 10px var(--nm-lo);
  --nm-out-sm: -2px -2px 6px var(--nm-hi), 2px 2px 6px var(--nm-lo);
  --nm-in: inset -3px -3px 7px var(--nm-hi), inset 3px 3px 7px var(--nm-lo);
  --nm-in-sm: inset -1px -1px 3px var(--nm-hi), inset 2px 2px 4px var(--nm-lo);
  /* Ручка на светлом: белое на белом различается только тенью, поэтому тень у неё ПЛОТНЕЕ
     общей. Плотность заведена ТОКЕНОМ, а не литералом: правило проекта — цвет теней меняется
     вместе с палитрой в одном месте, литерал увёл бы ручку в грязь при первой правке темы. */
  --nm-lo-strong: rgba(120, 138, 165, 0.72);
  --nm-out-xs: -1px -1px 2px var(--nm-hi), 1px 2px 5px var(--nm-lo-strong);
  --nm-knob: #ffffff;
  /* Канавка тумблера в светлой теме темнее поверхности: иначе выключенное состояние читается
     как пустое место, а не как паз. */
  --nm-groove: linear-gradient(145deg, #d9dde6, #eef1f6);
  --nm-surface: linear-gradient(145deg, #ffffff, var(--bg-secondary));
  --nm-surface-in: linear-gradient(145deg, var(--bg-secondary), #ffffff);
  --busy-scrim: rgba(196, 206, 220, 0.62); /* заставка: светлый скрим, карточка тон-в-тон с фоном */
}

/* Светлая тема — общий фон/цвет текста (перекрывает тёмный base) */
html[data-theme='light'] body {
  background: var(--bg-primary);
  color: var(--text-primary);
}

/* ---- Тёмный текст на акцентных (navy) поверхностях → белый ---- */
html[data-theme='light'] .tool-btn.btn-primary,
html[data-theme='light'] .ux-primary,
html[data-theme='light'] .ai-gen-btn,
html[data-theme='light'] .skip-link,
html[data-theme='light'] .hist-row.active .hist-icon,
html[data-theme='light'] .foil-checkbox-check {
  color: #fff;
}

/* ---- Рабочая зона: тёплая бумага + мягкий свет ---- */
html[data-theme='light'] #canvas-area {
  background:
    radial-gradient(circle at 50% 30%, rgba(30, 58, 95, 0.045), transparent 60%),
    linear-gradient(180deg, #f8f7f3 0%, #eeebe3 100%);
}
/* Карта лежит на столе для сверки — реалистичная мягкая тень */
html[data-theme='light'] #main-canvas {
  box-shadow:
    0 20px 50px rgba(30, 40, 60, 0.22),
    0 2px 8px rgba(30, 40, 60, 0.12);
}

/* ---- Bento-тактильность: мягкие тени и скругления у карточек ---- */
html[data-theme='light'] .preset-card,
html[data-theme='light'] .library-item,
html[data-theme='light'] .palette-item,
html[data-theme='light'] .version-card,
html[data-theme='light'] .uploaded-item,
html[data-theme='light'] .inline-icon-grid .library-item {
  box-shadow: var(--shadow-sm);
}
html[data-theme='light'] .preset-card:hover,
html[data-theme='light'] .version-card:hover {
  box-shadow: var(--shadow-md);
}
/* Активная секция слоёв — мягкая «плитка», не залитый прямоугольник */
html[data-theme='light'] .layer-item.active {
  background: var(--accent-dim);
  border-color: rgba(30, 58, 95, 0.28);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* ---- Скроллбары под светлую тему ---- */
html[data-theme='light'] ::-webkit-scrollbar-thumb {
  background: #d7d2c6;
}
html[data-theme='light'] ::-webkit-scrollbar-thumb:hover {
  background: #c2bcae;
}

/* ---- Мелкие превью узоров на светлой бумаге ---- */
html[data-theme='light'] .chip-thumb {
  background: #fbfaf6;
}

/* ---- Кнопка-переключатель в тулбаре (активна = выбрана не-дефолтная тема) ---- */
html[data-theme='light'] #btn-theme {
  border-color: rgba(30, 58, 95, 0.35);
  background: var(--accent-dim);
  color: var(--accent);
}

/* ---- Ползунки: navy-трек на светлом ---- */
html[data-theme='light'] input[type='range'] {
  background: linear-gradient(90deg, rgba(30, 58, 95, 0.25), var(--bg-active));
}