/* Варианты темы меняют только токены. Компоненты и шаблоны остаются общими. */
@layer themes {
  :root[data-theme='neutral'] {
    --color-accent: #384454;
    --color-bg: #f6f7f9;
    --color-subtle: #f3f4f6;
    --color-hover: #edf0f3;
    --color-text: #242a33;
    --color-body: #46505c;
    --color-secondary: #667080;
    --color-muted: #838c98;
    --color-border: #e5e8ed;
    --color-border-strong: #d3d9e1;
  }

  :root[data-theme='blue'] {
    --color-accent: #3267b5;
    --color-bg: #f6f8fb;
    --color-subtle: #f1f4f9;
    --color-hover: #eaf0f8;
    --color-text: #233044;
    --color-body: #43546a;
    --color-secondary: #63758b;
    --color-muted: #8290a1;
    --color-border: #e3e9f1;
    --color-border-strong: #d0dbe8;
  }

  :root[data-density='compact'] {
    --density-scale: 0.85;
    --header-size: 58px;
  }

  :root[data-corners='square'] {
    --corner-scale: 0.2;
  }
  :root[data-corners='round'] {
    --corner-scale: 1.7;
  }
  :root[data-type-size='large'] {
    --type-scale: 1.12;
  }

  /* Пороги media нельзя выразить через var() без сборщика. Здесь только
     изменения адаптивных токенов; сами пороги остаются явными в layout CSS. */
  @media (max-width: 1100px) {
    :root {
      --contacts-pane-size: 280px;
      --conversation-padding-inline: var(--space-5);
    }
  }
  @media (max-width: 1000px) {
    :root {
      --deal-pane-size: 265px;
      --company-pane-size: 265px;
    }
  }
  @media (max-width: 900px) {
    :root {
      --header-padding-inline: var(--space-5);
      --page-padding-inline: var(--space-5);
      --page-padding-block: var(--space-5);
      --page-heading-padding: var(--space-5-75) var(--page-padding-inline);
    }
  }
  @media (max-width: 820px) {
    :root {
      --contacts-pane-size: 245px;
    }
  }
  @media (max-width: 620px) {
    :root {
      --rail-size: 55px;
      --header-size: 57px;
      --rail-item-size: 40px;
      --brand-size: 32px;
      --icon-button-size: 28px;
      --header-padding-inline: var(--space-3-75);
      --page-padding-inline: var(--space-3-75);
      --page-padding-block: var(--space-3-75);
      --conversation-padding-inline: var(--space-3);
      --message-outgoing-size: var(--message-outgoing-size-mobile);
      --page-heading-padding: var(--space-5-75) var(--page-padding-inline);
    }
  }
}