/* ClearSignal: Penpot в стиле продукта (docs/specs/mockups.md §3.1). Подключается последним стилем index.html
   (cs-entry.conf, sub_filter перед </head>), поэтому перекрывает переменные тем Penpot без !important.
   Penpot не меняется: только его семантические переменные (42 шт., на них держится весь интерфейс), шрифт
   интерфейса и пара мест с его рекламой. Тёмная и светлая темы Penpot выглядят одинаково — как ClearSignal.
   Токены — из frontend/index.html ClearSignal (Stone + Emerald). Шрифты холста (макетов) это не трогает. */

/* ── Шрифт интерфейса: Inter вместо Work Sans ─────────────────────────────────────────────────────────────────
   То же имя семейства, что у Penpot: более поздние @font-face с тем же именем берутся первыми для своих
   символов, остальное (арабский и т. п.) остаётся за его Work Sans/Vazirmatn. Вес — из вариативного файла. */
@font-face {
  font-family: "worksans";
  font-display: swap;
  src: url("/cs-fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "worksans";
  font-display: swap;
  src: url("/cs-fonts/inter-latin.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: "cs-roboto-serif";
  font-weight: 100 900;
  font-display: swap;
  src: url("/cs-fonts/roboto-serif-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "cs-roboto-serif";
  font-weight: 100 900;
  font-display: swap;
  src: url("/cs-fonts/roboto-serif-latin.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;
}

/* ── Палитра ClearSignal на месте обеих тем Penpot ─────────────────────────────────────────────────────────── */
.default,
.light {
  color-scheme: light;

  --color-background-primary: #FAFAF9;      /* фон страницы ClearSignal */
  --color-background-secondary: #E7E5E4;    /* разделители, рамки */
  --color-background-tertiary: #F5F5F4;     /* панели, сайдбар */
  --color-background-quaternary: #EEECE8;   /* поля, наведение */
  --color-background-default: #FFFFFF;      /* карточки */
  --color-background-disabled: #F5F5F4;
  --color-foreground-primary: #1C1917;
  --color-foreground-secondary: #78716C;
  --color-foreground-disabled: #A8A29E;
  --color-icon-default: #78716C;

  --color-accent-primary: #059669;          /* изумрудный акцент ClearSignal */
  --color-accent-primary-muted: #D1FAE5;
  --color-accent-secondary: #047857;
  --color-accent-tertiary: #047857;         /* наведение на кнопки, рамка выделения на холсте */
  --color-accent-tertiary-muted: rgba(5, 150, 105, 0.10);
  --color-accent-quaternary: #34D399;
  --color-accent-overlay: rgba(5, 150, 105, 0.6);
  --color-accent-select: rgba(5, 150, 105, 0.10);
  --color-accent-background-select: rgba(5, 150, 105, 0.7);
  --color-accent-action: #6EE7B7;
  --color-accent-action-hover: #34D399;
  --color-accent-off: #F5F5F4;
  --color-accent-default: #EEECE8;

  --color-accent-success: #059669;
  --color-background-success: #ECFDF5;
  --color-accent-warning: #D97706;
  --color-background-warning: #FEF3C7;
  --color-accent-error: #DC2626;
  --color-background-error: #FEE2E2;
  --color-foreground-error: #B91C1C;
  --color-accent-info: #2563EB;
  --color-background-info: #DBEAFE;

  --color-static-white: #FFFFFF;
  --color-static-black: #1C1917;
  --color-shadow-dark: rgba(28, 25, 23, 0.06);
  --color-shadow-light: rgba(28, 25, 23, 0.18);
  --color-overlay-default: rgba(250, 250, 249, 0.6);
  --color-overlay-onboarding: rgba(250, 250, 249, 0.92);
  --color-canvas: #EEECE8;
  --overlay-color: rgba(28, 25, 23, 0.32);
}

/* Основные кнопки — белый текст на изумрудном, как в ClearSignal. */
.main_ui_ds_buttons_button__button-primary,
.main_ui_ds_buttons_icon_button__icon-button-primary {
  --button-fg-color: #FFFFFF;
  --button-hover-fg-color: #FFFFFF;
  --button-active-fg-color: #FFFFFF;
}

/* Заголовки разделов — Roboto Serif, как заголовки страниц ClearSignal. */
[class*="dashboard-title"] h1,
[class*="dashboard-header"] h1 {
  font-family: "cs-roboto-serif", Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Внутри ClearSignal (раздел «Дизайн», html.cs-embedded ставит cs-entry.js): логотип, проект, название файла и
   состояние сохранения показывает шапка документа ClearSignal — у Penpot они скрыты; меню Penpot остаётся. */
html.cs-embedded .main_ui_workspace_left_header__main-icon,
html.cs-embedded .main_ui_workspace_left_header__project-tree,
html.cs-embedded .main_ui_workspace_left_header__shared-badge { display: none; }
/* Просмотр досок (телефон): ссылка «домой» вела бы на дашборд Penpot. Окно входа поверх файла закрывать
   некуда — вход нажимает скрипт. */
html.cs-embedded .main_ui_viewer_header__home-link,
html.cs-standalone .main_ui_viewer_header__home-link,
html.cs-embedded .main_ui_static__dialog-login .main_ui_static__modal-close { display: none; }

/* Penpot внутри ClearSignal — без того, что уводит из продукта, обходит его доступ или не нужно человеку
   (аудит 2026-11-12, design-in-app.md §3). Без условия на html.cs-*: вне ClearSignal людям Penpot не показывается,
   а вкладкам моста и экспортёру меню не нужны.
   - «Плагины»: менеджер ставит сторонние плагины по ссылке — их код получает файлы; Ctrl+Alt+P глушит cs-entry.js.
   - «MCP server»: внутренняя связь Penpot с ИИ (её держит мост); «Manage» уводит на дашборд и выпускает токены.
   - «Помощь и информация»: семь ссылок на сайт, сообщество, YouTube, GitHub, условия Penpot; «Сочетания клавиш»
     открываются клавишей «?» (подменю из одного пункта Penpot ставит не на место — убран весь пункт).
   - Кнопки плагинов и MCP на панели инструментов — то же, что пункты меню.
   - Тема интерфейса: палитра ClearSignal одна на обе темы, переключатель (Alt+M) ничего бы не менял.
   - «Share» в редакторе и «Поделиться» в просмотре: публичная ссылка в обход доступа ClearSignal.
   - Вкладка Tokens: дизайн-токены не переведены и пока не нужны (наборы компонентов — следующим шагом). */
#file-menu-plugins,
#file-menu-mcp,
#file-menu-help-info,
.main_ui_workspace_main_menu__separator:has(+ #file-menu-help-info),
button[data-tool="plugins"],
button[data-tool="mcp"],
#file-menu-help-center,
#file-menu-community,
#file-menu-youtube,
#file-menu-release-notes,
#file-menu-templates,
#file-menu-github,
#file-menu-terms,
#file-menu-toggle-theme,
.main_ui_workspace_right_header__viewer-btn[title="Share"],
.main_ui_workspace_right_header__viewer-btn[title^="Поделиться"],
.main_ui_viewer_header__share-btn,
li:has(> button#tokens[role="tab"]) { display: none !important; }

/* Знак в шапке редактора — ClearSignal вместо кубика Penpot (ссылка на главную остаётся та же). */
.main_ui_workspace_left_header__main-icon > svg { display: none; }
.main_ui_workspace_left_header__main-icon {
  background: url("/images/favicon.svg") center / 24px 24px no-repeat;
}

/* Реклама Penpot на главной: «Объединяйтесь!» с приглашением участников. Позвать коллег можно из меню команды. */
.main_ui_dashboard_projects__team-hero { display: none; }
.main_ui_dashboard_projects__with-team-hero { block-size: calc(100vh - 5rem); }