/* ============================================================================ tokens.css — дизайн-токены LUMZ (цвета/радиусы) для imagegen-web. Принцип конструктора (как в storyboard-automation/views/theme.py): • Слой 1 — сырая палитра: цвет назван ОДИН раз. • Слой 2 — семантика: блоки ссылаются на палитру через var(--...). Hex напрямую в разметке/раскладке НЕ пишем — только --color-* / --border-*. Источник: THEME_SECTIONS из views/theme.py (тема LUMZ). Фон — живое значение #121313 (rgb 16,17,18), совпадает с программой. ========================================================================== */ :root { /* ── Слой 1. Сырая палитра (имя → значение, один раз) ───────────────── */ --lumz-bg: #121313; /* главный фон окна / панелей */ --lumz-white: #ffffff; /* базовый текст */ --lumz-white-rgb: 255, 255, 255; /* канал для rgba-прозрачностей */ --lumz-red: #e4344a; /* акцент / главный CTA */ --lumz-red-hover: #d92d44; --lumz-red-pressed: #c52539; --lumz-gold: #d4a256; /* золотой акцент / галочка в меню */ --lumz-green: #10b981; /* зелёный акцент (готово) */ /* Цвета панели генератора — сняты 1:1 с storyboard-automation (generator_page.py / model_select.py). Панель приводим к виду аппки. */ --lumz-lime: #cfff24; /* кнопка генерации (лайм/шартрёз) */ --lumz-lime-ink: #15101e; /* тёмная стрелка ↑ на лайме */ --lumz-amber: #e8b86a; /* активный сегмент (тёплый янтарь) */ --lumz-amber-ink: #101208; /* тёмный текст на янтаре */ --lumz-panel: #191b1d; /* фон промпт-бара и попапа меню */ --lumz-seg-group: #131516; /* фон группы сегментов / кнопки модели */ --lumz-menu-hover: #242627; /* hover пункта меню */ --lumz-menu-text: #e8e3f0; /* текст пунктов меню */ /* ── Слой 2. Семантические токены (ссылаются на палитру) ────────────── */ /* Фон и поверхности */ --color-bg: var(--lumz-bg); --color-panel: var(--lumz-bg); --color-card: rgba(var(--lumz-white-rgb), 0.03); --color-subtle: rgba(var(--lumz-white-rgb), 0.04); --color-hover: rgba(var(--lumz-white-rgb), 0.06); /* Границы */ --border-default: rgba(var(--lumz-white-rgb), 0.06); --border-strong: rgba(var(--lumz-white-rgb), 0.12); --border-subtle: rgba(var(--lumz-white-rgb), 0.04); /* Текст */ --color-text: var(--lumz-white); --color-text-secondary: rgba(var(--lumz-white-rgb), 0.55); --color-text-muted: rgba(var(--lumz-white-rgb), 0.40); /* Акценты */ --color-accent: var(--lumz-red); --color-accent-hover: var(--lumz-red-hover); --color-accent-pressed: var(--lumz-red-pressed); --color-accent-gold: var(--lumz-gold); --color-accent-green: var(--lumz-green); /* Лампы состояния ключей (шапка). Общий пул на сервере, один на всех: цвет = реальное состояние ключа (ok/limit/dead). ЯРКИЕ чистые цвета (не тема- токены --lumz-*, которые для ламп приглушены) — чтобы состояние читалось чётко. */ --color-lamp-ok: #22e06a; /* ok — ярко-зелёный */ --color-lamp-limit: #ffd21e; /* limit — ярко-жёлтый */ --color-lamp-dead: #ff3b30; /* dead — ярко-красный */ /* Скроллбар (глобально, тёмная тема): тонкий, трек прозрачный, ползунок приглушённо-светлый, ярче на hover. Принцип как в Storyboard. */ --color-scrollbar-thumb: rgba(255, 255, 255, 0.14); --color-scrollbar-thumb-hover: rgba(255, 255, 255, 0.26); /* Панель генератора (композер) — как в аппке */ --color-composer-bg: var(--lumz-panel); --color-seg-group: var(--lumz-seg-group); --color-segment-active: var(--lumz-green); --color-segment-active-text: var(--lumz-green); --color-generate: var(--lumz-lime); --color-generate-ink: var(--lumz-lime-ink); --color-menu-bg: var(--lumz-panel); --color-menu-text: var(--lumz-menu-text); --color-menu-hover: var(--lumz-menu-hover); --color-menu-check: var(--lumz-gold); /* Кнопки и контролы: тихий минимальный слой без "штампованной" flat-тени */ --button-bg: rgba(var(--lumz-white-rgb), 0.035); --button-bg-hover: rgba(16, 185, 129, 0.12); --button-bg-active: rgba(16, 185, 129, 0.18); --button-bg-danger: var(--lumz-red); --button-bg-danger-hover: #ff6073; --button-border: rgba(var(--lumz-white-rgb), 0.045); --button-border-hover: rgba(16, 185, 129, 0.2); --button-border-accent: rgba(212, 162, 86, 0.34); --button-text: var(--color-text); --button-text-muted: var(--color-text-secondary); --button-text-active: var(--lumz-green); --button-shadow-flat: 0 10px 24px rgba(0, 0, 0, 0.18); --button-shadow-flat-sm: none; --shadow-card: 0 12px 30px rgba(0, 0, 0, 0.24); --shadow-card-hover: 0 16px 36px rgba(0, 0, 0, 0.28); --shadow-control: none; /* Скругления */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 14px; /* ── Движение (motion): длительности + кривые, как палитра ──────────── */ /* Заданы один раз именами. Любые transition/animation в app.css берут длительность и кривую ТОЛЬКО отсюда — жёстких ms/cubic не пишем. */ --motion-fast: 120ms; /* hover/active кнопок — мгновенный отклик */ --motion-base: 200ms; /* фокус поля, смена состояний, ресайз сетки */ --motion-slow: 360ms; /* появление экрана, дыхание загрузки */ --motion-flip: 200ms; /* flip-смена цифры в статус-плашке (проезд вниз) */ --motion-breath: 2600ms;/* очень мягкое ОБЩЕЕ дыхание ламп (синхронно, без волны) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* мягкое торможение */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* плавно туда-обратно */ /* Акцентное свечение (фокус/hover), выведено из --lumz-red */ --accent-glow: rgba(228, 52, 74, 0.15); --accent-glow-strong: rgba(228, 52, 74, 0.25); /* Тень плавающих поверхностей (панель ввода) */ --shadow-float: 0 8px 32px rgba(0, 0, 0, 0.45); } /* ── Брейкпоинты (заготовки под будущую раскладку) ───────────────────── Пустые блоки специально: структура заложена сразу, значения токенов будем переопределять здесь по мере роста интерфейса. */ /* Планшет и шире */ @media (min-width: 768px) { :root { /* переопределения токенов для >= 768px */ } } /* Десктоп и шире */ @media (min-width: 1200px) { :root { /* переопределения токенов для >= 1200px */ } }