/*
 * ГЕНЕРОВАНИЙ ФАЙЛ — НЕ РЕДАГУВАТИ ВРУЧНУ.
 * Оновлення: php bin/console app:ds:sync-tokens  (перевірка без запису: --check)
 *
 * Токени дизайн-системи ТАТ (React-бібліотека packages/ui-kit монорепо CRM).
 * Сторібук:        https://crm.tat.ua/docs/storybook/
 * Джерело:         https://crm.tat.ua/docs/storybook/assets/iframe-TL_bqAQ3.css
 * Ассет:           iframe-TL_bqAQ3.css
 * Синхронізовано:  2026-10-10 21:13 (Europe/Kyiv)
 * Змінних:         327
 *
 * Огляд токенів:   «Foundation/Токени»    https://crm.tat.ua/docs/storybook/?path=/story/foundation-токени--overview
 * Теми CRM:        «Foundation/CRM-теми»  https://crm.tat.ua/docs/storybook/?path=/story/foundation-crm-теми--matrix
 * Беремо лише :root і тему .theme-tat (Біржа працює тільки в ній; клас theme-tat стоїть на <html>).
 */
/* ==== Токени ==== */

:root {
  --center: center;
  --start: start;
  --end: end;
  --self-end: self-end;
  --stretch: stretch;
  --space-between: space-between;
  --space-around: space-around;
  --space-evenly: space-evenly;
  --row: row;
  --column: column;
  --dense: dense;
  --row-dense: row dense;
  --column-dense: column dense;
  --absolute: absolute;
  --relative: relative;
  --fixed: fixed;
  --auto: auto;
  --hidden: hidden;
}

:root {
  --color-white: #fff;
  --color-white-70: rgb(255 255 255 / 70%);
  --color-white-75: rgb(255 255 255 / 75%);
  --color-white-40: rgb(255 255 255 / 40%);
  --color-burgundy: #75283c;
  --color-rose: #ff3965;
  --color-raspberry-pink: #f24066;
  --color-mulberry: #bc3262;
  --color-scarlet: #ff0038;
  --color-midnight-purple: #5d0755;
  --color-purple-light: #850779;
  --color-lavender: #c2bad2;
  --color-lavender-light: #eee6ee;
  --color-cherry: #ff174a;
  --color-light-gray: #f2f2f2;
  --color-leaf-green: #57ac52;
  --color-spring-green: #3bde89;
  --color-lime: #c6ff40;
  --color-sunflower: #ffd839;
  --color-orange-red: #e45000;
  --color-crimson: #d72023;
  --color-neutral-gray: #747474;
  --color-dark-text: #170436;
  --color-black: #3d3d3d;
  --color-gray-05: #ededee;
  --color-light-cool-gray: #dddee0;
  --color-cool-gray: #8f9397;
  --color-gray-100: #f0f3f8;
  --color-gray-300: #bfc7d4;
  --color-gray-400: #9ba5b7;
  --color-gray-500: #6b7280;
  --color-gray-700: #3d3f45;
  --color-main-black: #27282b;
  --color-button-secondary-text: #1a1b1e;
  --color-vivid-purple: #8b1bc2;
  --color-graphite-blue: #414b52;
  --color-gray: #808080;
  --color-black-40: rgb(0 0 0 / 40%);
  --color-blue-gray: #acafb2;
  --icons-color: #1a1b1e;
  --color-blue-50: #eaf0fe;
  --color-blue-100: #d6e4fc;
  --color-blue-200: #c8d9fb;
  --color-blue-300: #a0bdf7;
  --color-blue-500: #437eec;
  --color-blue-600: #2e6ad8;
  --color-yellow-50: #fffbeb;
  --color-yellow-500: #ffcc14;
  --color-yellow-600: #d39400;
  --color-yellow-700: #b45309;
  --color-green-50: #dcfce7;
  --color-green-600: #149d52;
  --color-red-50: #fceeee;
  --color-danger: #e84040;
  --color-danger-hover: #d23636;
  --color-danger-10: rgb(232 64 64 / 10%);
  --color-danger-40: rgb(232 64 64 / 40%);
  --color-yellow-10: rgb(255 204 20 / 10%);
  --color-yellow-40: rgb(255 204 20 / 40%);
  --color-charcoal: #2b2f36;
  --color-charcoal-hover: #1c2025;
  --color-neutral-50: #f8f9fb;
  --color-neutral-100: #f2f4f7;
  --color-neutral-200: #e4e7ec;
  --color-neutral-300: #9ba5b7;
  --color-neutral-400: #9ba5b7;
  --color-neutral-700: #344054;
  --color-white-10: rgb(255 255 255 / 10%);
  --color-white-20: rgb(255 255 255 / 20%);
  --color-border-default: #e2e6ef;
  --color-divider: #e5e5e5;
  --color-background-light: #f8f9fb;
  --color-text-tertiary: #9ba5b7;
  --color-amber: #ffcc14;
  --color-table-row-hover: #f4f7fe;
  --color-table-row-highlight: #eaf0fe;
  --color-table-row-danger: #fdecec;
  --color-table-row-warning: #fffae8;
}

:root {
  --size-0: 0px;
  --size-1: 1px;
  --size-1-5: 1.5px;
  --size-2: 2px;
  --size-3: 3px;
  --size-4: 4px;
  --size-6: 6px;
  --size-7: 7px;
  --size-8: 8px;
  --size-9: 9px;
  --size-10: 10px;
  --size-11: 11px;
  --size-12: 12px;
  --size-13: 13px;
  --size-14: 14px;
  --size-15: 15px;
  --size-16: 16px;
  --size-18: 18px;
  --size-20: 20px;
  --size-22: 22px;
  --size-24: 24px;
  --size-28: 28px;
  --size-32: 32px;
  --size-34: 34px;
  --size-35: 35px;
  --size-36: 36px;
  --size-40: 40px;
  --size-48: 48px;
  --size-50: 50px;
  --size-56: 56px;
  --size-60: 60px;
  --size-64: 64px;
  --size-65: 65px;
  --size-96: 96px;
  --size-100: 100px;
  --size-120: 120px;
  --size-160: 160px;
  --size-168: 168px;
  --size-174: 174px;
  --size-220: 220px;
  --size-227: 227px;
  --size-240: 240px;
  --size-256: 256px;
  --size-280: 280px;
  --size-300: 300px;
  --size-320: 320px;
  --size-360: 360px;
  --size-365: 365px;
  --size-432: 432px;
  --size-460: 460px;
  --size-500: 500px;
  --size-674: 674px;
  --size-640: 640px;
  --size-800: 800px;
  --size-924: 924px;
  --size-999: 999px;
  --parent: 100%;
  --auto: auto;
  --hidden: hidden;
  --min-content: min-content;
  --max-content: max-content;
}

:root {
  --line-height-0: 0;
  --line-height-0-7: .7;
  --line-height-1: 1;
  --line-height-1-14: 1.14;
  --line-height-1-2: 1.2;
  --line-height-1-25: 1.25;
  --line-height-1-33: 1.33;
  --line-height-1-35: 1.35;
  --line-height-1-375: 1.375;
  --line-height-1-4: 1.4;
  --line-height-1-43: 1.43;
  --line-height-1-5: 1.5;
  --line-height-1-6: 1.6;
  --font-size-10: 10px;
  --font-size-12: 12px;
  --font-size-13: 13px;
  --font-size-14: 14px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-32: 32px;
  --font-size-40: 40px;
  --font-weight-400: 400;
  --font-weight-500: 500;
  --font-weight-600: 600;
  --font-weight-700: 700;
  --text-transform-uppercase: uppercase;
  --text-transform-lowercase: lowercase;
  --text-transform-capitalize: capitalize;
  --text-decoration-none: none;
  --text-decoration-underline: underline;
  --text-decoration-line-through: line-through;
  --white-space-normal: normal;
  --white-space-nowrap: nowrap;
  --white-space-pre-wrap: pre-wrap;
  --white-space-pre-line: pre-line;
  --text-align-left: left;
  --text-align-center: center;
  --text-align-right: right;
}

:root {
  --border-solid: solid;
  --border-dashed: dashed;
  --border-none: none;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;
}

:root {
  --box-shadow-popup: 0 1px 4.9px 0 rgb(143 147 151 / 21%), 0 1px 12px 0 rgb(143 147 151 / 16%);
  --box-shadow-card: 4px 11px 15px 0 rgb(126 149 171 / 10%);
  --box-shadow-hint: 0 4px 12px 0 rgb(39 40 43 / 12%);
  --box-shadow-xs: 0 1px 2px 0 rgb(39 40 43 / 8%);
  --box-shadow-brand-glow: 0 8px 9px 0 rgb(67 126 236 / 50%);
  --box-shadow-sm: 0 2px 8px 0 rgb(26 41 82 / 6%);
  --box-shadow-elevation-sm: 0 1px 4px 0 rgb(39 40 43 / 6%), 0 2px 8px 0 rgb(39 40 43 / 10%);
  --box-shadow-pinned-column: 1px 0 1px 0 rgb(39 40 43 / 10%);
}

:root {
  --contain: contain;
  --cover: cover;
}

:root {
  --purple-1: #fafaff;
  --purple-2: #e4e3f5;
  --purple-3: #23282d;
  --purple-4: #8c4a91;
  --grey-1: #b0b6c2;
  --grey-2: #83848b;
  --blue: #6fb7ff;
  --red: #e95673;
  --green: #2cc679;
  --black: #3d3d3d;
  --yellow: #f2c94c;
  --color-main: #8c4a91;
  --color-table: #00b5ad;
  --color-hover: #529de8;
  --bg-main: #f9f9f9;
  --bg-second: #e4e3f5;
  --bg-third: #d4e9fe;
  --bg-fourth: #8c4a91;
  --bg-header: #313048;
  --bg-table: #f0f8f8;
  --status-error: #e84040;
  --status-error-bg: #fee2e2;
  --status-success: #149d52;
  --status-success-bg: #dcfce7;
  --status-warning: #d39400;
  --status-warning-bg: #fffbeb;
  --text-primary: #1a1b1e;
  --text-secondary: #3d3f45;
  --text-placeholder: #9ba5b7;
  --border-default: #e2e6ef;
  --border-warning: #fde68a;
  --bg-secondary: #f8f9fb;
  --bg-tertiary: #f0f3f8;
  --bg-navbar: #27282b;
  --accent-green: #2cc679;
  --accent-yellow: #ffcc14;
  --accent-orange: #ff6512;
  --brand-bg: #313048;
  --nav-text: #9ba5b7;
  --svg-main: #23282d;
  --svg-main-hover: #2d333a;
  --tag-color: #8c4a91;
  --tag-bg: #d5d5ef;
  --btn-color-1: #8c4a91;
  --btn-bg-1: #eeeeee;
  --btn-bg-1-hover: #cfceec;
  --btn-color-2: #fff;
  --btn-bg-2: #8c4a91;
  --btn-bg-2-hover: #a056a5;
  --btn-bg-2-before: #7b407f;
  --btn-color-3: #807fb3;
  --btn-color-3-hover: #fff;
  --btn-bg-3: #e4e3f5;
  --btn-bg-3-hover: #8c4a91;
  --btn-color-1-hover: #b78dba;
  --controls-border: #cfceec;
  --controls-active-item: #cfceec;
  --table-separator: #e4e3f5;
  --filters-bg: #e4e3f5;
  --indicators: #8c4a91;
  --font-weight-400: 400;
  --font-weight-600: 600;
  --link-color: #437eec;
  --link-color-hover: #2e6ad8;
  --link-color-focus: #2e6ad8;
  --link-color-active: #1f55c0;
  --checkbox-active: #DEB0DE;
  --brand-subtle: #F0D8F1;
  --btn-primary: #8c4a91;
  --btn-primary-hover: color-mix(in srgb, #8c4a91 85%, #000);
  --brand-muted: color-mix(in srgb, #8c4a91 50%, #fff);
}

.theme-tat {
  --brand-bg: #27282B;
  --brand-subtle: #eaf0fe;
  --checkbox-active: #2569ed;
  --nav-text: #e2e6ef;
  --main-color: #457fef;
  --main-color-active: #2569ed;
  --btn-primary: #457fef;
  --btn-primary-hover: #2569ed;
  --brand-muted: #a0bdf7;
  --color-main: #457fef;
  --color-table: #27282b;
  --color-hover: #eaf0fe;
  --bg-main: #f9f9f9;
  --bg-second: #eaf0fe;
  --bg-fourth: #457fef;
  --bg-header: #323336;
  --bg-table: #eaf0fe;
  --table-separator: #eaf0fe;
  --tag-color: #ffffff;
  --tag-bg: #457fef;
  --tag-border: #457fef;
  --btn-color-1: #457fef;
  --btn-color-1-hover: #2569ed;
  --btn-bg-1-hover: #eaf0fe;
  --btn-color-2: #fff;
  --btn-bg-2: #457fef;
  --btn-bg-2-hover: #2569ed;
  --btn-bg-2-before: #457fef;
  --btn-color-3: #3b559a;
  --btn-color-3-hover: #fff;
  --btn-bg-3: #e9edf9;
  --btn-bg-3-hover: #2569ed;
  --controls-border: #bfbfc0;
  --controls-active-item: #eaf0fe;
  --blue: #457fef;
  --purple-2: #ffffff;
  --purple-4: #457fef;
  --filters-bg: #ffffff;
  --indicators: #e84040;
}