/* ============================================================
   themes.css — ПАЛИТРЫ тем staff-интерфейса.

   ФАЙЛ ГЕНЕРИРУЕТСЯ формой /alien8admin/themes. Руками не править:
   следующее сохранение через форму перезапишет правку.
   Файл в .gitignore — он редактируется на проде, а staff-ui.css
   приезжает туда через git pull.

   Блок темы задаёт ХАРАКТЕР: палитру, радиусы, тени, шрифт.
   РАСКЛАДКУ он не трогает — размеры тач-целей, сетка отступов,
   высоты панелей, кегли и цвета статусов живут в :root и одинаковы
   всюду: иначе человек за чужим рабочим местом не найдёт привычный
   элемент там, где ждал. Подробности — CLAUDE.md 3.7.
   ============================================================ */

/* @theme terra | Терракота — глиняная тёплая, кирпичный акцент | dark=0 */
[data-staff-theme="terra"] {
  --su-bg: #f2e9e3;
  --su-surface: #fffcfa;
  --su-text: #241814;
  --su-text-muted: #7a675e;
  --su-n-100: #fbf6f3;
  --su-n-200: #f4ebe6;
  --su-n-300: #eaded7;
  --su-n-400: #d8c4b9;
  --su-n-500: #ab9084;
  --su-n-600: #7a675e;
  --su-n-700: #5b4c45;
  --su-n-800: #3c322d;
  --su-n-900: #241814;
  --su-a-100: #fbe7e0;
  --su-a-200: #f5cabd;
  --su-a-300: #e9a28c;
  --su-a-400: #d97a5d;
  --su-a-500: #c25836;
  --su-a-600: #a04122;
  --su-a-700: #7e331b;
  --su-a-800: #5c2513;
  --su-a-900: #3b170c;
  --su-b-100: #e6f1ec;
  --su-b-200: #c7e2d6;
  --su-b-300: #99cbb6;
  --su-b-400: #66ad91;
  --su-b-500: #3d8f71;
  --su-b-600: #25735a;
  --su-b-700: #1c5946;
  --su-b-800: #144033;
  --su-b-900: #0d2a21;
  --su-fill-primary: #a04122;
  --su-fill-primary-hover: #7e331b;
  --su-on-primary: #fffcfa;
}

/* @theme terra-sw | Терракота — глиняная тёплая, кирпичный акцент · строгая | dark=0 */
[data-staff-theme="terra-sw"] {
  --su-bg: #f2e9e3;
  --su-surface: #fffcfa;
  --su-text: #241814;
  --su-text-muted: #7a675e;
  --su-n-100: #fbf6f3;
  --su-n-200: #f4ebe6;
  --su-n-300: #eaded7;
  --su-n-400: #d8c4b9;
  --su-n-500: #ab9084;
  --su-n-600: #7a675e;
  --su-n-700: #5b4c45;
  --su-n-800: #3c322d;
  --su-n-900: #241814;
  --su-a-100: #fbe7e0;
  --su-a-200: #f5cabd;
  --su-a-300: #e9a28c;
  --su-a-400: #d97a5d;
  --su-a-500: #c25836;
  --su-a-600: #a04122;
  --su-a-700: #7e331b;
  --su-a-800: #5c2513;
  --su-a-900: #3b170c;
  --su-b-100: #e6f1ec;
  --su-b-200: #c7e2d6;
  --su-b-300: #99cbb6;
  --su-b-400: #66ad91;
  --su-b-500: #3d8f71;
  --su-b-600: #25735a;
  --su-b-700: #1c5946;
  --su-b-800: #144033;
  --su-b-900: #0d2a21;
  --su-fill-primary: #a04122;
  --su-fill-primary-hover: #7e331b;
  --su-on-primary: #fffcfa;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}

/* @theme ochre | Охра — слоновая кость, медовый акцент | dark=0 */
[data-staff-theme="ochre"] {
  --su-bg: #f4efe2;
  --su-surface: #fffdf7;
  --su-text: #211c11;
  --su-text-muted: #736b57;
  --su-n-100: #fcf9f1;
  --su-n-200: #f6f1e5;
  --su-n-300: #ece5d3;
  --su-n-400: #d9cfb6;
  --su-n-500: #a89d82;
  --su-n-600: #736b57;
  --su-n-700: #565040;
  --su-n-800: #39352a;
  --su-n-900: #211c11;
  --su-a-100: #fbeecb;
  --su-a-200: #f5daa0;
  --su-a-300: #eabf63;
  --su-a-400: #d89f2d;
  --su-a-500: #bd8012;
  --su-a-600: #9a660b;
  --su-a-700: #7a5108;
  --su-a-800: #583a06;
  --su-a-900: #382503;
  --su-b-100: #e8f2e6;
  --su-b-200: #cbe3c6;
  --su-b-300: #9dcb95;
  --su-b-400: #6bad60;
  --su-b-500: #448a38;
  --su-b-600: #2c6c22;
  --su-b-700: #21541a;
  --su-b-800: #173d13;
  --su-b-900: #0f280c;
  --su-fill-primary: #2a2417;
  --su-fill-primary-hover: #39352a;
  --su-on-primary: #fffdf7;
}

/* @theme ochre-sw | Охра — слоновая кость, медовый акцент · строгая | dark=0 */
[data-staff-theme="ochre-sw"] {
  --su-bg: #f4efe2;
  --su-surface: #fffdf7;
  --su-text: #211c11;
  --su-text-muted: #736b57;
  --su-n-100: #fcf9f1;
  --su-n-200: #f6f1e5;
  --su-n-300: #ece5d3;
  --su-n-400: #d9cfb6;
  --su-n-500: #a89d82;
  --su-n-600: #736b57;
  --su-n-700: #565040;
  --su-n-800: #39352a;
  --su-n-900: #211c11;
  --su-a-100: #fbeecb;
  --su-a-200: #f5daa0;
  --su-a-300: #eabf63;
  --su-a-400: #d89f2d;
  --su-a-500: #bd8012;
  --su-a-600: #9a660b;
  --su-a-700: #7a5108;
  --su-a-800: #583a06;
  --su-a-900: #382503;
  --su-b-100: #e8f2e6;
  --su-b-200: #cbe3c6;
  --su-b-300: #9dcb95;
  --su-b-400: #6bad60;
  --su-b-500: #448a38;
  --su-b-600: #2c6c22;
  --su-b-700: #21541a;
  --su-b-800: #173d13;
  --su-b-900: #0f280c;
  --su-fill-primary: #2a2417;
  --su-fill-primary-hover: #39352a;
  --su-on-primary: #fffdf7;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}

/* @theme inkpaper | Бумага — тёплый монохром, чернильный акцент | dark=0 */
[data-staff-theme="inkpaper"] {
  --su-bg: #f3f1ec;
  --su-surface: #fffefb;
  --su-text: #17150f;
  --su-text-muted: #6d685c;
  --su-n-100: #faf9f6;
  --su-n-200: #f3f1eb;
  --su-n-300: #e9e6de;
  --su-n-400: #d5d0c4;
  --su-n-500: #a39d8e;
  --su-n-600: #6d685c;
  --su-n-700: #514d44;
  --su-n-800: #35322c;
  --su-n-900: #17150f;
  --su-a-100: #e6e9f2;
  --su-a-200: #ccd2e6;
  --su-a-300: #a3aed1;
  --su-a-400: #8b98c9;
  --su-a-500: #6474b0;
  --su-a-600: #4a5b96;
  --su-a-700: #3a4877;
  --su-a-800: #2a3557;
  --su-a-900: #1a2137;
  --su-b-100: #e8eaf6;
  --su-b-200: #ccd1ec;
  --su-b-300: #9fa9dc;
  --su-b-400: #6c7bc8;
  --su-b-500: #4a5cb4;
  --su-b-600: #334399;
  --su-b-700: #28347a;
  --su-b-800: #1d265a;
  --su-b-900: #12183a;
  --su-fill-primary: #2a3557;
  --su-fill-primary-hover: #1a2137;
  --su-on-primary: #fffefb;
}

/* @theme inkpaper-sw | Бумага — тёплый монохром, чернильный акцент · строгая | dark=0 */
[data-staff-theme="inkpaper-sw"] {
  --su-bg: #f3f1ec;
  --su-surface: #fffefb;
  --su-text: #17150f;
  --su-text-muted: #6d685c;
  --su-n-100: #faf9f6;
  --su-n-200: #f3f1eb;
  --su-n-300: #e9e6de;
  --su-n-400: #d5d0c4;
  --su-n-500: #a39d8e;
  --su-n-600: #6d685c;
  --su-n-700: #514d44;
  --su-n-800: #35322c;
  --su-n-900: #17150f;
  --su-a-100: #e6e9f2;
  --su-a-200: #ccd2e6;
  --su-a-300: #a3aed1;
  --su-a-400: #8b98c9;
  --su-a-500: #6474b0;
  --su-a-600: #4a5b96;
  --su-a-700: #3a4877;
  --su-a-800: #2a3557;
  --su-a-900: #1a2137;
  --su-b-100: #e8eaf6;
  --su-b-200: #ccd1ec;
  --su-b-300: #9fa9dc;
  --su-b-400: #6c7bc8;
  --su-b-500: #4a5cb4;
  --su-b-600: #334399;
  --su-b-700: #28347a;
  --su-b-800: #1d265a;
  --su-b-900: #12183a;
  --su-fill-primary: #2a3557;
  --su-fill-primary-hover: #1a2137;
  --su-on-primary: #fffefb;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}

/* @theme citrus | Цитрус — белая, оранжево-бирюзовая пара | dark=0 */
[data-staff-theme="citrus"] {
  --su-bg: #fdf6ec;
  --su-surface: #ffffff;
  --su-text: #1c1408;
  --su-text-muted: #7a6a52;
  --su-n-100: #fefaf4;
  --su-n-200: #fbf3e8;
  --su-n-300: #f5e9d8;
  --su-n-400: #e6d5ba;
  --su-n-500: #b8a688;
  --su-n-600: #7a6a52;
  --su-n-700: #5b503d;
  --su-n-800: #3c3428;
  --su-n-900: #1c1408;
  --su-a-100: #ffeddb;
  --su-a-200: #ffd6b0;
  --su-a-300: #ffb578;
  --su-a-400: #fd8f3c;
  --su-a-500: #f26a0c;
  --su-a-600: #d15106;
  --su-a-700: #a53f05;
  --su-a-800: #792d03;
  --su-a-900: #4e1d02;
  --su-b-100: #d9f5f3;
  --su-b-200: #b0ebe6;
  --su-b-300: #79dbd3;
  --su-b-400: #3fc3ba;
  --su-b-500: #17a79d;
  --su-b-600: #0b8880;
  --su-b-700: #086b64;
  --su-b-800: #054e49;
  --su-b-900: #03322f;
  --su-fill-primary: #f26a0c;
  --su-fill-primary-hover: #d15106;
  --su-on-primary: #ffffff;
}

/* @theme citrus-sw | Цитрус — белая, оранжево-бирюзовая пара · строгая | dark=0 */
[data-staff-theme="citrus-sw"] {
  --su-bg: #fdf6ec;
  --su-surface: #ffffff;
  --su-text: #1c1408;
  --su-text-muted: #7a6a52;
  --su-n-100: #fefaf4;
  --su-n-200: #fbf3e8;
  --su-n-300: #f5e9d8;
  --su-n-400: #e6d5ba;
  --su-n-500: #b8a688;
  --su-n-600: #7a6a52;
  --su-n-700: #5b503d;
  --su-n-800: #3c3428;
  --su-n-900: #1c1408;
  --su-a-100: #ffeddb;
  --su-a-200: #ffd6b0;
  --su-a-300: #ffb578;
  --su-a-400: #fd8f3c;
  --su-a-500: #f26a0c;
  --su-a-600: #d15106;
  --su-a-700: #a53f05;
  --su-a-800: #792d03;
  --su-a-900: #4e1d02;
  --su-b-100: #d9f5f3;
  --su-b-200: #b0ebe6;
  --su-b-300: #79dbd3;
  --su-b-400: #3fc3ba;
  --su-b-500: #17a79d;
  --su-b-600: #0b8880;
  --su-b-700: #086b64;
  --su-b-800: #054e49;
  --su-b-900: #03322f;
  --su-fill-primary: #f26a0c;
  --su-fill-primary-hover: #d15106;
  --su-on-primary: #ffffff;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}

/* @theme bubblegum | Ягода — светлая розово-лиловая, живая | dark=0 */
[data-staff-theme="bubblegum"] {
  --su-bg: #fbf0f5;
  --su-surface: #ffffff;
  --su-text: #1f0f1a;
  --su-text-muted: #7d6070;
  --su-n-100: #fdf8fa;
  --su-n-200: #faf0f5;
  --su-n-300: #f4e4ec;
  --su-n-400: #e6c9d9;
  --su-n-500: #b795a8;
  --su-n-600: #7d6070;
  --su-n-700: #5e4755;
  --su-n-800: #3e2f38;
  --su-n-900: #1f0f1a;
  --su-a-100: #ffe4f0;
  --su-a-200: #ffc2de;
  --su-a-300: #ff93c3;
  --su-a-400: #f963a4;
  --su-a-500: #e93a85;
  --su-a-600: #c72469;
  --su-a-700: #9e1c53;
  --su-a-800: #74143c;
  --su-a-900: #4a0c26;
  --su-b-100: #e8ebfd;
  --su-b-200: #cfd5fa;
  --su-b-300: #a9b3f4;
  --su-b-400: #7d8aea;
  --su-b-500: #5560db;
  --su-b-600: #3b43bd;
  --su-b-700: #2e3495;
  --su-b-800: #21266d;
  --su-b-900: #151847;
  --su-fill-primary: #c72469;
  --su-fill-primary-hover: #9e1c53;
  --su-on-primary: #ffffff;
}

/* @theme bubblegum-sw | Ягода — светлая розово-лиловая, живая · строгая | dark=0 */
[data-staff-theme="bubblegum-sw"] {
  --su-bg: #fbf0f5;
  --su-surface: #ffffff;
  --su-text: #1f0f1a;
  --su-text-muted: #7d6070;
  --su-n-100: #fdf8fa;
  --su-n-200: #faf0f5;
  --su-n-300: #f4e4ec;
  --su-n-400: #e6c9d9;
  --su-n-500: #b795a8;
  --su-n-600: #7d6070;
  --su-n-700: #5e4755;
  --su-n-800: #3e2f38;
  --su-n-900: #1f0f1a;
  --su-a-100: #ffe4f0;
  --su-a-200: #ffc2de;
  --su-a-300: #ff93c3;
  --su-a-400: #f963a4;
  --su-a-500: #e93a85;
  --su-a-600: #c72469;
  --su-a-700: #9e1c53;
  --su-a-800: #74143c;
  --su-a-900: #4a0c26;
  --su-b-100: #e8ebfd;
  --su-b-200: #cfd5fa;
  --su-b-300: #a9b3f4;
  --su-b-400: #7d8aea;
  --su-b-500: #5560db;
  --su-b-600: #3b43bd;
  --su-b-700: #2e3495;
  --su-b-800: #21266d;
  --su-b-900: #151847;
  --su-fill-primary: #c72469;
  --su-fill-primary-hover: #9e1c53;
  --su-on-primary: #ffffff;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}

/* @theme cobalt | Кобальт — холодный туман, электрик | dark=0 */
[data-staff-theme="cobalt"] {
  --su-bg: #e9edf5;
  --su-surface: #ffffff;
  --su-text: #111527;
  --su-text-muted: #616b85;
  --su-n-100: #f6f8fc;
  --su-n-200: #eef1f8;
  --su-n-300: #e2e7f2;
  --su-n-400: #cbd3e6;
  --su-n-500: #98a3c0;
  --su-n-600: #616b85;
  --su-n-700: #48526b;
  --su-n-800: #2d3549;
  --su-n-900: #111527;
  --su-a-100: #e5eaff;
  --su-a-200: #cbd6ff;
  --su-a-300: #a3b5ff;
  --su-a-400: #748fff;
  --su-a-500: #4a63f5;
  --su-a-600: #2b40dc;
  --su-a-700: #2032ae;
  --su-a-800: #182580;
  --su-a-900: #101854;
  --su-b-100: #fff3d9;
  --su-b-200: #ffe3a8;
  --su-b-300: #ffcc66;
  --su-b-400: #f9b23a;
  --su-b-500: #e89413;
  --su-b-600: #c5760a;
  --su-b-700: #9b5c08;
  --su-b-800: #714205;
  --su-b-900: #4a2b03;
  --su-fill-primary: #2b40dc;
  --su-fill-primary-hover: #2032ae;
  --su-on-primary: #ffffff;
}

/* @theme cobalt-sw | Кобальт — холодный туман, электрик · строгая | dark=0 */
[data-staff-theme="cobalt-sw"] {
  --su-bg: #e9edf5;
  --su-surface: #ffffff;
  --su-text: #111527;
  --su-text-muted: #616b85;
  --su-n-100: #f6f8fc;
  --su-n-200: #eef1f8;
  --su-n-300: #e2e7f2;
  --su-n-400: #cbd3e6;
  --su-n-500: #98a3c0;
  --su-n-600: #616b85;
  --su-n-700: #48526b;
  --su-n-800: #2d3549;
  --su-n-900: #111527;
  --su-a-100: #e5eaff;
  --su-a-200: #cbd6ff;
  --su-a-300: #a3b5ff;
  --su-a-400: #748fff;
  --su-a-500: #4a63f5;
  --su-a-600: #2b40dc;
  --su-a-700: #2032ae;
  --su-a-800: #182580;
  --su-a-900: #101854;
  --su-b-100: #fff3d9;
  --su-b-200: #ffe3a8;
  --su-b-300: #ffcc66;
  --su-b-400: #f9b23a;
  --su-b-500: #e89413;
  --su-b-600: #c5760a;
  --su-b-700: #9b5c08;
  --su-b-800: #714205;
  --su-b-900: #4a2b03;
  --su-fill-primary: #2b40dc;
  --su-fill-primary-hover: #2032ae;
  --su-on-primary: #ffffff;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}

/* @theme graphene | Графен — холодный монохром, лаймовый акцент | dark=0 */
[data-staff-theme="graphene"] {
  --su-bg: #f0f1f2;
  --su-surface: #ffffff;
  --su-text: #0e1113;
  --su-text-muted: #666c72;
  --su-n-100: #f7f8f9;
  --su-n-200: #eff1f2;
  --su-n-300: #e3e6e8;
  --su-n-400: #ccd1d5;
  --su-n-500: #98a0a7;
  --su-n-600: #666c72;
  --su-n-700: #4b5157;
  --su-n-800: #30353a;
  --su-n-900: #0e1113;
  --su-a-100: #eef7e0;
  --su-a-200: #dcefbf;
  --su-a-300: #c1e08c;
  --su-a-400: #a2cd57;
  --su-a-500: #84b52d;
  --su-a-600: #68941a;
  --su-a-700: #527514;
  --su-a-800: #3c560e;
  --su-a-900: #273809;
  --su-b-100: #f4fbe8;
  --su-b-200: #e6f6cb;
  --su-b-300: #cdec9d;
  --su-b-400: #aedd5f;
  --su-b-500: #93c832;
  --su-b-600: #75a621;
  --su-b-700: #5b8118;
  --su-b-800: #425d11;
  --su-b-900: #2a3b0a;
  --su-fill-primary: #171a1d;
  --su-fill-primary-hover: #30353a;
  --su-on-primary: #ffffff;
}

/* @theme graphene-sw | Графен — холодный монохром, лаймовый акцент · строгая | dark=0 */
[data-staff-theme="graphene-sw"] {
  --su-bg: #f0f1f2;
  --su-surface: #ffffff;
  --su-text: #0e1113;
  --su-text-muted: #666c72;
  --su-n-100: #f7f8f9;
  --su-n-200: #eff1f2;
  --su-n-300: #e3e6e8;
  --su-n-400: #ccd1d5;
  --su-n-500: #98a0a7;
  --su-n-600: #666c72;
  --su-n-700: #4b5157;
  --su-n-800: #30353a;
  --su-n-900: #0e1113;
  --su-a-100: #eef7e0;
  --su-a-200: #dcefbf;
  --su-a-300: #c1e08c;
  --su-a-400: #a2cd57;
  --su-a-500: #84b52d;
  --su-a-600: #68941a;
  --su-a-700: #527514;
  --su-a-800: #3c560e;
  --su-a-900: #273809;
  --su-b-100: #f4fbe8;
  --su-b-200: #e6f6cb;
  --su-b-300: #cdec9d;
  --su-b-400: #aedd5f;
  --su-b-500: #93c832;
  --su-b-600: #75a621;
  --su-b-700: #5b8118;
  --su-b-800: #425d11;
  --su-b-900: #2a3b0a;
  --su-fill-primary: #171a1d;
  --su-fill-primary-hover: #30353a;
  --su-on-primary: #ffffff;
  --su-radius-sm: 2px;
  --su-radius-md: 2px;
  --su-radius-lg: 2px;
  --su-radius-pill: 2px;
  --su-radius-round: 2px;
  --su-shadow-sm: 0 0 0 1px var(--su-n-300);
  --su-shadow-md: 0 0 0 1px var(--su-n-500);
  --su-shadow-lg: 0 0 0 1px var(--su-n-800);
  --su-ring: 0 0 0 2px var(--su-a-600);
}