/* Общий контракт оформления. Литералы цветов и размеров допустимы только здесь и в themes.css. */
@layer tokens, themes, base, components, modules, utilities;
@layer tokens {
  :root {
    /* Палитра и семантические роли. Менять по назначению, а не по экрану. */
    --color-bg: #f7f8fa;
    --color-surface: #ffffff;
    --color-subtle: #f5f7f7;
    --color-hover: #f0f3f2;
    --color-text: #22292a;
    --color-secondary: #697376;
    --color-muted: #8b9496;
    --color-body: #4b5551;
    --color-border: #e8eceb;
    --color-border-strong: #d9e1de;
    --color-accent: #17695b;
    --color-on-accent: #ffffff;
    --color-danger: #b54b48;
    --color-danger-soft: #fff1ef;
    --color-warning: #9a6c2c;
    --color-warning-soft: #faf3e7;
    --color-avatar-sand-bg: #f0eade;
    --color-avatar-sand-text: #8b7250;
    --color-avatar-blue-bg: #e7edf4;
    --color-avatar-blue-text: #60778d;
    --color-avatar-purple-bg: #ede8f2;
    --color-avatar-purple-text: #84718d;
    --color-avatar-rose-bg: #f4e9e9;
    --color-avatar-rose-text: #a46f72;
    --color-pipeline-new: #c2d1c7;
    --color-pipeline-work: #b2c7d4;
    --color-pipeline-offer: #dbcfab;
    --color-pipeline-agreement: #c5bad0;
    --color-pipeline-won: #8ebaa1;
    --color-focus: #c5a779;
    --color-accent-hover: color-mix(in srgb, var(--color-accent), var(--color-text) 18%);
    --color-accent-soft: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
    --color-accent-border: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface));
    --color-pane: color-mix(in srgb, var(--color-bg) 60%, var(--color-surface));
    --color-history: var(--color-bg);
    --color-success: #6b8a76;
    --color-overlay: #1b292744;
    --color-shadow: #1a33251a;
    --density-scale: 1;
    --corner-scale: 1;
    --type-scale: 1;
    --space-unit: 4px;
    --space-8: calc(var(--space-unit) * 8 * var(--density-scale));
    --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-body: 1.55;
    --line-height-heading: 1.35;
    --line-height-message: 1.8;
    --line-height-compact: 1.4;
    --tracking-heading: -0.025em;
    --tracking-label: 0.07em;
    --border-width: 1px;
    --border-style: solid;
    --border-emphasis-width: 2px;
    --border-default: var(--border-width) var(--border-style) var(--color-border);
    --border-control: var(--border-width) var(--border-style) var(--color-border-strong);
    --border-accent: var(--border-width) var(--border-style) var(--color-accent);
    --border-dashed: var(--border-width) dashed var(--color-border-strong);
    --focus-width: 2px;
    --focus-offset: 3px;
    --focus-outline: var(--focus-width) solid var(--color-accent);
    --radius-circle: 50%;
    --radius-sm: var(--radius-6);
    --radius-md: var(--radius-9);
    --radius-lg: var(--radius-13);
    --icon-size: 18px;
    --icon-size-sm: 15px;
    --icon-size-lg: 21px;
    --icon-stroke: 1.6;
    --avatar-size: 38px;
    --avatar-size-sm: 27px;
    --avatar-size-lg: 43px;
    --control-height: calc(34px * var(--density-scale));
    --control-height-sm: calc(28px * var(--density-scale));
    --icon-button-size: 32px;
    --brand-size: 36px;
    --rail-item-size: 46px;
    --rail-size: 72px;
    --header-size: 66px;
    --contacts-pane-size: 323px;
    --deal-pane-size: 322px;
    --company-pane-size: 315px;
    --message-max-size: 780px;
    --message-outgoing-size: 86%;
    --message-outgoing-size-mobile: 94%;
    --composer-max-size: 25dvh;
    --composer-min-size: 68px;
    --dialog-size: 520px;
    --content-max-size: 1100px;
    --shadow-dialog: 0 20px 80px var(--color-shadow);
    --shadow-control: 0 1px 3px var(--color-shadow);
    --shadow-toast: 0 6px 24px var(--color-shadow);
    --shadow-focus: 0 0 0 var(--focus-width) var(--color-accent-soft);
    --motion-fast: 0.16s;
    --opacity-disabled: 0.5;
    --layer-tooltip: 8;
    --layer-skip: 20;
    --layer-toast: 30;
    --font-xs: var(--font-11);
    --font-sm: var(--font-12);
    --font-md: var(--font-13);
    --font-lg: var(--font-15);
    --font-xl: var(--font-21);
    /* Семантические параметры общих компонентов. */
    --brand-icon-size: 24px;
    --control-font-size: var(--font-sm);
    --control-font-size-sm: var(--font-xs);
    --control-radius: var(--radius-sm);
    --brand-radius: var(--radius-10);
    --navigation-radius: var(--radius-10);
    --button-padding: var(--space-1-75) var(--space-3);
    --button-padding-sm: var(--space-1) var(--space-2-25);
    --header-padding-inline: var(--space-6-5);
    --page-padding-inline: var(--space-7-5);
    --page-padding-block: var(--space-6-5);
    --page-heading-padding: var(--space-6-75) var(--page-padding-inline) var(--space-5-5);
    --conversation-padding-inline: var(--space-7-5);
    --panel-padding: var(--space-5);
    --card-bg: var(--color-surface);
    --card-border: var(--border-default);
    --card-radius: var(--radius-md);
    --message-bg: var(--color-surface);
    --message-border: var(--border-default);
    --message-radius: var(--radius-10);
    --message-outgoing-bg: var(--color-accent-soft);
    --message-outgoing-border: var(--color-accent-border);
    --message-font-size: var(--font-sm);
    --contact-selected-bg: var(--color-accent-soft);
    --contact-selected-border: var(--color-accent-border);
    --composer-border: var(--border-control);
    --composer-radius: var(--radius-10);
    --dialog-radius: var(--radius-14);
    --font-21: calc(21px * var(--type-scale));
    /* Используемые шкалы: размеры, типографика, отступы и радиусы. */
    --font-10: calc(10px * var(--type-scale));
    --font-11: calc(11px * var(--type-scale));
    --font-12: calc(12px * var(--type-scale));
    --font-13: calc(13px * var(--type-scale));
    --font-14: calc(14px * var(--type-scale));
    --font-15: calc(15px * var(--type-scale));
    --font-16: calc(16px * var(--type-scale));
    --font-17: calc(17px * var(--type-scale));
    --font-19: calc(19px * var(--type-scale));
    --font-20: calc(20px * var(--type-scale));
    --font-23: calc(23px * var(--type-scale));
    --font-27: calc(27px * var(--type-scale));
    --font-8: calc(8px * var(--type-scale));
    --font-9: calc(9px * var(--type-scale));
    --radius-10: calc(10px * var(--corner-scale));
    --radius-13: calc(13px * var(--corner-scale));
    --radius-14: calc(14px * var(--corner-scale));
    --radius-2: calc(2px * var(--corner-scale));
    --radius-3: calc(3px * var(--corner-scale));
    --radius-4: calc(4px * var(--corner-scale));
    --radius-5: calc(5px * var(--corner-scale));
    --radius-6: calc(6px * var(--corner-scale));
    --radius-7: calc(7px * var(--corner-scale));
    --radius-8: calc(8px * var(--corner-scale));
    --radius-9: calc(9px * var(--corner-scale));
    --size-1: 1px;
    --size-11: 11px;
    --size-110: 110px;
    --size-12: 12px;
    --size-13: 13px;
    --size-14: 14px;
    --size-15: 15px;
    --size-150: 150px;
    --size-170: 170px;
    --size-18: 18px;
    --size-184: 184px;
    --size-2: 2px;
    --size-20: 20px;
    --size-208: 208px;
    --size-210: 210px;
    --size-22: 22px;
    --size-220: 220px;
    --size-225: 225px;
    --size-230: 230px;
    --size-24: 24px;
    --size-240: 240px;
    --size-245: 245px;
    --size-25: 25px;
    --size-250: 250px;
    --size-29: 29px;
    --size-3: 3px;
    --size-30: 30px;
    --size-31: 31px;
    --size-310: 310px;
    --size-32: 32px;
    --size-33: 33px;
    --size-330: 330px;
    --size-35: 35px;
    --size-38: 38px;
    --size-390: 390px;
    --size-4: 4px;
    --size-40: 40px;
    --size-48: 48px;
    --size-5: 5px;
    --size-55: 55px;
    --size-59: 59px;
    --size-6: 6px;
    --size-65: 65px;
    --size-650: 650px;
    --size-7: 7px;
    --size-70: 70px;
    --size-720: 720px;
    --size-77: 77px;
    --size-81: 81px;
    --size-85: 85px;
    --size-91: 91px;
    --space-0-25: calc(var(--space-unit) * 0.25 * var(--density-scale));
    --space-0-5: calc(var(--space-unit) * 0.5 * var(--density-scale));
    --space-0-75: calc(var(--space-unit) * 0.75 * var(--density-scale));
    --space-1: calc(var(--space-unit) * 1 * var(--density-scale));
    --space-1-25: calc(var(--space-unit) * 1.25 * var(--density-scale));
    --space-1-5: calc(var(--space-unit) * 1.5 * var(--density-scale));
    --space-1-75: calc(var(--space-unit) * 1.75 * var(--density-scale));
    --space-13: calc(var(--space-unit) * 13 * var(--density-scale));
    --space-13-25: calc(var(--space-unit) * 13.25 * var(--density-scale));
    --space-17-5: calc(var(--space-unit) * 17.5 * var(--density-scale));
    --space-2: calc(var(--space-unit) * 2 * var(--density-scale));
    --space-2-25: calc(var(--space-unit) * 2.25 * var(--density-scale));
    --space-2-5: calc(var(--space-unit) * 2.5 * var(--density-scale));
    --space-2-75: calc(var(--space-unit) * 2.75 * var(--density-scale));
    --space-22-5: calc(var(--space-unit) * 22.5 * var(--density-scale));
    --space-3: calc(var(--space-unit) * 3 * var(--density-scale));
    --space-3-25: calc(var(--space-unit) * 3.25 * var(--density-scale));
    --space-3-5: calc(var(--space-unit) * 3.5 * var(--density-scale));
    --space-3-75: calc(var(--space-unit) * 3.75 * var(--density-scale));
    --space-4: calc(var(--space-unit) * 4 * var(--density-scale));
    --space-4-25: calc(var(--space-unit) * 4.25 * var(--density-scale));
    --space-4-5: calc(var(--space-unit) * 4.5 * var(--density-scale));
    --space-4-75: calc(var(--space-unit) * 4.75 * var(--density-scale));
    --space-5: calc(var(--space-unit) * 5 * var(--density-scale));
    --space-5-25: calc(var(--space-unit) * 5.25 * var(--density-scale));
    --space-5-5: calc(var(--space-unit) * 5.5 * var(--density-scale));
    --space-5-75: calc(var(--space-unit) * 5.75 * var(--density-scale));
    --space-6: calc(var(--space-unit) * 6 * var(--density-scale));
    --space-6-25: calc(var(--space-unit) * 6.25 * var(--density-scale));
    --space-6-5: calc(var(--space-unit) * 6.5 * var(--density-scale));
    --space-6-75: calc(var(--space-unit) * 6.75 * var(--density-scale));
    --space-7: calc(var(--space-unit) * 7 * var(--density-scale));
    --space-7-5: calc(var(--space-unit) * 7.5 * var(--density-scale));
  }
}