/* Общая база дизайн-системы: вендоренные шрифты и палитра для всех страниц (чат, логин, админка). Правки токенов — только здесь. */ /* ===== Шрифты — вендоренные локально, cyrillic+latin ===== */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400-cyr.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/inter-400-lat.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500-cyr.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/inter-500-lat.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600-cyr.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/inter-600-lat.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jbmono-400-cyr.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/jbmono-400-lat.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/jbmono-600-cyr.woff2") format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/jbmono-600-lat.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ===== Токены — палитра «NP prototype SystemDesign» (дизайн 1.0) ===== Темы::root = светлая, [data-theme="dark"] = тёмная D-A «фирменный navy», [data-theme="terminal"] = терминальная T-D «ледяной». Блоки тем переопределяют ТОЛЬКО токены — стилей по темам на страницах нет. Атрибут ставит inline-гард в каждой страницы (localStorage vlk_theme), синхронизацию с PG делает rail.js по /api/me. */ :root { --navy:#1B2D5B; --navy-deep:#111D3E; --blue:#2B6FCB; --orange:#EFA01E; --orange-deep:#D98B15; --ink:#141928; --ink-2:#262C3D; --ink-3:#3A4155; --ink-4:#515870; --muted:#6B738A; --faint:#8E95A9; --ghost:#B4B9C8; --bg:#F5F6F9; --card:#fff; --line:#ECEEF3; --line-strong:#D5D8E1; --line-row:#E7E9F0; --green:#1A9D5C; --green-bg:#E8F7EF; --green-line:#C6E7D2; --amber:#C67A10; --amber-bg:#FEF0D5; --amber-line:#FADCA3; --red:#D63B3B; --red-deep:#B42318; --red-bg:#FCEAEA; --red-line:#F4D4D4; --shadow-card:0 1px 3px rgba(17,29,62,.08),0 1px 2px rgba(17,29,62,.04); --shadow-pop:0 4px 12px rgba(17,29,62,.08),0 1px 2px rgba(17,29,62,.04); --mono:'JetBrains Mono',ui-monospace,monospace; /* — Семантика поверх палитры — всё, что темы красят иначе — */ --font:'Inter',system-ui,-apple-system,sans-serif; --on-accent:#fff; /* текст/иконки на акцентных заливках */ --code-bg:var(--bg); /* фон код-блоков (терминальная — глубже) */ --bub:var(--bg); /* пузырь сообщения пользователя */ --blue-bg:#EDF2FA; --blue-line:#CFDCF0;/* голубые выделения (chips admin/hitl) */ --overlay:rgba(17,29,62,.55); /* фон модального оверлея */ --focus:0 0 0 3px rgba(43,111,203,.12); /* focus-ring полей */ --focus-card:0 0 0 2px rgba(43,111,203,.14); /* выделение активной карточки */ --btn-grad:linear-gradient(135deg,#2B6FCB,#1B2D5B); /* CTA-кнопки */ --btn-solid:#1B2D5B; --btn-solid-hover:#111D3E; /* плоские navy-кнопки */ --accent-grad:linear-gradient(135deg,#EFA01E,#D98B15); /* оранжевые CTA/аватары */ --tile-bg:#1B2D5B; --tile-ink:#fff; /* бренд-плитка с логотипом */ --shadow-btn:0 2px 8px rgba(43,111,203,.28); --shadow-btn-orange:0 2px 8px rgba(239,160,30,.30); --halo-orange:0 0 0 2px rgba(239,160,30,.14); --halo-waiting:0 0 0 2.5px rgba(239,160,30,.3); --glow-hero:0 0 0 4px rgba(239,160,30,.14),0 4px 14px rgba(239,160,30,.28); --shadow-soft:0 1px 3px rgba(17,29,62,.06); --shadow-hover:0 4px 12px rgba(17,29,62,.10); /* Радиусы (терминальная тема обнуляет все) */ --r-xs:5px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:14px; --r-bub:18px 18px 6px 18px; --r-composer:20px; --r-pill:9999px; --r-round:50%; /* Рельса (/rail.js) и «тёмный угол» */ --rail-bg:var(--navy-deep); --rail-line:rgba(255,255,255,.08); --rail-tile:rgba(255,255,255,.10); --rail-ink:rgba(255,255,255,.62); --rail-ink-strong:#fff; --rail-hover:rgba(255,255,255,.08); --rail-active:rgba(255,255,255,.14); --rail-co:rgba(255,255,255,.55); --rail-co-line:rgba(255,255,255,.16); /* Navy-колонка (чаты / вызовы агента) */ --col-bg:var(--navy); --col-ink:rgba(255,255,255,.75); --col-ink-strong:#fff; --col-ink-dim:rgba(255,255,255,.55); --col-cap:rgba(255,255,255,.38); --col-faint:rgba(255,255,255,.45); --col-dim:rgba(255,255,255,.32); --col-hover:rgba(255,255,255,.07); --col-active:rgba(255,255,255,.11); --col-line:rgba(255,255,255,.24); /* --glyph здесь НЕ задан:::before композера без него не рендерится вовсе — глиф «>» существует только в терминальной теме */ } /* ===== Тёмная тема — «фирменный navy» ===== */ [data-theme="dark"] { color-scheme: dark; /* тёмные скроллбары и нативные инпуты */ --navy:#E9ECF5; /* заголовки: navy-текст становится ink */ --navy-deep:#0A0F1F; /* рельса — угол чуть глубже фона */ --blue:#6B9EEF; --orange:#F4AC35; --orange-deep:#DD9420; --ink:#E9ECF5; --ink-2:#D9DEEC; --ink-3:#C3C9DD; --ink-4:#A6ADC6; --muted:#9BA3BC; --faint:#767E98; --ghost:#5A6280; --bg:#0E1424; --card:#161E36; --line:#232C4A; --line-strong:#3A4468; --line-row:#232C4A; --green:#3DC98A; --green-bg:#12291F; --green-line:#1D4030; --amber:#E8A33D; --amber-bg:#2B2212; --amber-line:#443519; --red:#F07070; --red-deep:#F58B8B; --red-bg:#331B1E; --red-line:#4E282C; --shadow-card:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --shadow-pop:0 4px 14px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3); --on-accent:#0E1424; --code-bg:#0C1120; --bub:#1C2643; --blue-bg:#1C2643; --blue-line:#333D60; --overlay:rgba(4,8,18,.62); --focus:0 0 0 3px rgba(107,158,239,.25); --focus-card:0 0 0 2px rgba(107,158,239,.3); --btn-grad:#6B9EEF; --btn-solid:#6B9EEF; --btn-solid-hover:#82AEF4; --accent-grad:linear-gradient(135deg,#F4AC35,#DD9420); --tile-bg:#1C2643; --tile-ink:#6B9EEF; --shadow-btn:0 2px 8px rgba(0,0,0,.35); --shadow-btn-orange:0 2px 8px rgba(0,0,0,.35); --halo-orange:0 0 0 2px rgba(244,172,53,.2); --halo-waiting:0 0 0 2.5px rgba(244,172,53,.32); --glow-hero:0 0 0 4px rgba(244,172,53,.16),0 4px 14px rgba(0,0,0,.4); --shadow-soft:0 1px 3px rgba(0,0,0,.3); --shadow-hover:0 4px 12px rgba(0,0,0,.4); --col-bg:#101828; } /* ===== Терминальная тема — T-D «ледяной» (мягкий голубой CB6FF, моно-шрифт, радиусы 0, тени → рамки; янтарь и green-on-black отклонены) ===== */ [data-theme="terminal"] { color-scheme: dark; --font:var(--mono); /* JetBrains Mono везде */ --navy:#CBD6E4; --navy-deep:#090C10; --blue:#6CB6FF; --orange:#6CB6FF; --orange-deep:#5AA6F0; /* один акцент вместо orange и blue */ --ink:#CBD6E4; --ink-2:#B9C6D7; --ink-3:#A3B2C6; --ink-4:#8FA0B5; --muted:#8394A8; --faint:#64748A; --ghost:#4C5A6E; --bg:#0E1218; --card:#151B24; --line:#222B38; --line-strong:#35414F; --line-row:#222B38; --green:#5BCB8A; --green-bg:#13251B; --green-line:#20402C; --amber:#E2B65A; --amber-bg:#272013; --amber-line:#43371D; --red:#F27E7E; --red-deep:#F79191; --red-bg:#2C1A1C; --red-line:#472829; --shadow-card:none; /* тени → рамки */ --shadow-pop:0 0 0 1px var(--line-strong); --on-accent:#0E1218; --code-bg:#0A0E13; --bub:#17222F; --blue-bg:#17222F; --blue-line:#303B49; --overlay:rgba(2,4,8,.68); --focus:0 0 0 3px rgba(108,182,255,.22); --focus-card:0 0 0 2px rgba(108,182,255,.3); --btn-grad:#6CB6FF; --btn-solid:#6CB6FF; --btn-solid-hover:#85C4FF; --accent-grad:#6CB6FF; --tile-bg:#17222F; --tile-ink:#6CB6FF; --shadow-btn:none; --shadow-btn-orange:none; --halo-orange:0 0 0 2px rgba(108,182,255,.2); --halo-waiting:0 0 0 2.5px rgba(108,182,255,.32); --glow-hero:none; --shadow-soft:none; --shadow-hover:none; --r-xs:0; --r-sm:0; --r-md:0; --r-lg:0; --r-xl:0; --r-bub:0; --r-composer:0; --r-pill:0; --r-round:0; --rail-bg:var(--navy-deep); --rail-line:rgba(170,210,255,.13); --rail-tile:rgba(170,210,255,.13); --rail-ink:rgba(170,210,255,.55); --rail-ink-strong:#CFE4FB; --rail-hover:rgba(170,210,255,.10); --rail-active:rgba(170,210,255,.16); --rail-co:rgba(170,210,255,.55); --rail-co-line:rgba(170,210,255,.2); --col-bg:#0B0F15; --col-ink:rgba(170,210,255,.75); --col-ink-strong:#CFE4FB; --col-ink-dim:rgba(170,210,255,.55); --col-cap:rgba(170,210,255,.4); --col-faint:rgba(170,210,255,.45); --col-dim:rgba(170,210,255,.32); --col-hover:rgba(170,210,255,.08); --col-active:rgba(170,210,255,.13); --col-line:rgba(170,210,255,.25); --glyph:'> '; /* глиф композера */ } /* Выделение текста в тёмных темах — UA-дефолт там нечитаем */ [data-theme="dark"] ::selection, [data-theme="terminal"] ::selection { background: var(--blue-line); color: var(--ink); }