/* Единая дизайн-система «Игральня» — подключается ПЕРВОЙ на всех страницах (гость /menu, админка /admin). Локальных :root в страницах быть не должно. Палитра = фирменные неон-постеры (QR-плакаты, лояльность): чернильная база и триада розовый/фиолет/циан. Гость — ярко, админка — тот же бренд строже. */ :root { /* чернильная база с фиолетовым подтоном */ --bg: #0b0b14; --bg-2: #10101c; --surface: #171725; --surface-2: #1f1f30; --card: var(--surface); /* старое имя на гостевом экране */ --card-2: var(--surface-2); --line: #2e2e48; --line-soft: #24243a; --text: #f1eff8; --muted: #9d98b4; /* сырая неон-триада постера — для градиентов и точечных акцентов */ --pink: #ff5ad0; --violet: #c86bff; --cyan: #43d9ff; /* акценты: фиолет — главный, циан — вторичный (цены/подсветки) */ --accent: var(--violet); --accent-2: var(--cyan); /* спокойный «глубокий» фиолет для рабочих заливок админки (белый текст читается) */ --accent-deep: #7c3aed; --accent-deep-2: #8b5cf6; /* статусы: смыслы-оттенки прежние (янтарь/синий/зелёный/красный), яркость неоновая */ --new: #ffb545; --progress: #4aa8ff; --done: #3ecf72; --ok: var(--done); /* старое имя на гостевом экране */ --warn: var(--new); /* журнал склада (stock.js) ждёт этот токен */ --danger: #ff6b6b; --danger-soft: #ffa1a8; /* текст ошибок на тёмном */ /* чернила на ярких неон-заливках (белый там проваливается по контрасту) */ --on-accent: #150a20; /* типографика: Manrope — текст, Unbounded — только лого/заголовки экранов */ --font-text: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Unbounded', 'Manrope', sans-serif; /* геометрия и тени */ --radius: 16px; --r-sm: 10px; --shadow: 0 4px 18px rgba(0, 0, 0, 0.35); --shadow-lg: 0 18px 50px rgba(0, 0, 0, 0.5); --glow: 0 4px 22px rgba(200, 107, 255, 0.38); --glow-soft: 0 2px 12px rgba(200, 107, 255, 0.22); --glow-pink: 0 8px 28px rgba(255, 90, 208, 0.35); --glow-cyan: 0 4px 20px rgba(67, 217, 255, 0.30); --text-glow: 0 0 14px rgba(200, 107, 255, 0.55); --ring: 0 0 0 3px rgba(200, 107, 255, 0.30); /* фирменные градиенты */ --grad-accent: linear-gradient(135deg, var(--violet), var(--cyan)); /* CTA гостя */ --grad-cta: linear-gradient(135deg, var(--pink), var(--violet)); /* корзина/вызов */ --grad-deep: linear-gradient(135deg, var(--accent-deep), var(--accent-deep-2)); /* админ */ --grad-brand: linear-gradient(92deg, var(--pink) 10%, var(--violet) 50%, var(--cyan) 90%); /* «МЕНЮ» с постера */ /* тематизируемые заливки админки (см. блок «классика» ниже) */ --header-bg: rgba(19, 19, 31, 0.86); --call-grad: linear-gradient(135deg, var(--pink), #ff8ac2); --bk-default-grad: linear-gradient(180deg, #8a5fd6, #7147c2); --bk-default-border: #a985e8; --bk-arrived-grad: linear-gradient(180deg, #3aa967, #2f8a54); --bk-arrived-border: #5fc98a; /* движение и безопасные зоны */ --spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --safe-b: env(safe-area-inset-bottom, 0px); } /* ============================================================================ Тема «классика» — тёплый слейт + терракота, как до неон-редизайна. Включается атрибутом data-theme="legacy" на (переключатель в админке; гостевой экран атрибут не ставит и всегда остаётся неоновым). */ :root[data-theme='legacy'] { --bg: #14151a; --bg-2: #181a20; --surface: #1f2127; --surface-2: #282b33; --line: #323845; --line-soft: #2a2f3a; --text: #eceef2; --muted: #98a0ad; /* триада схлопывается в тёплую пару + старый синий */ --pink: #d6843f; --violet: #d6843f; --cyan: #5b94c4; --accent: #d6843f; --accent-2: #e0a458; --accent-deep: #c1762f; --accent-deep-2: #d6843f; --new: #d6a35f; --progress: #5b94c4; --done: #4f9d5a; --danger: #c96a6a; --danger-soft: #d98a8a; --on-accent: #221a0d; --glow: 0 4px 20px rgba(214, 132, 63, 0.35); --glow-soft: 0 2px 12px rgba(214, 132, 63, 0.22); --glow-pink: 0 8px 28px rgba(214, 132, 63, 0.35); --glow-cyan: 0 4px 20px rgba(91, 148, 196, 0.30); --text-glow: 0 0 14px rgba(214, 132, 63, 0.55); --ring: 0 0 0 3px rgba(214, 132, 63, 0.25); --grad-accent: linear-gradient(135deg, #d6843f, #e0a458); --grad-cta: linear-gradient(135deg, #d6843f, #d6a35f); --grad-deep: linear-gradient(135deg, #d6843f, #e0a458); --grad-brand: linear-gradient(92deg, #d6843f, #e0a458); --header-bg: rgba(30, 33, 41, 0.86); --call-grad: linear-gradient(135deg, #d6843f, #d6a35f); --bk-default-grad: linear-gradient(180deg, #5b94c4, #4a7eaa); --bk-default-border: #74a8d4; --bk-arrived-grad: linear-gradient(180deg, #4f9d5a, #418449); --bk-arrived-border: #6cb877; }