/* Timeweb ВХ CRM — тема поверх Krayin.
   Источник токенов: Timeweb Design System (colors_and_type.css).
   Светлая тема переопределяется через :where(html:not(.dark)) — специфичность как у
   утилит Tailwind, поэтому файл грузится после app.css и выигрывает по порядку,
   а dark:-варианты Krayin (.dark .x) продолжают работать. */

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-cyrillic-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    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;
}

:root {
    --tw-coral: #DC6655;
    --tw-coral-hover: #C4543F;
    --tw-coral-text: #B04A38;
    --tw-coral-deep: #973D2E;
    --tw-coral-soft: #F4D8D0;
    --tw-coral-tint: #FBEEEA;
    --tw-brown: #3D322E;
    --tw-brown-soft: #5A4A44;
    --tw-cream: #F6F1EA;
    --tw-cream-deep: #ECE4D8;
    --tw-cream-hover: #F1EAE0;
    --tw-paper: #FFFFFF;
    --tw-ink: #1F1A18;
    --tw-ink-3: #6B5E58;
    --tw-ink-4: #97897F;
    --tw-line: #E2D8CB;
    --tw-line-2: #CFC2B2;
    --tw-shadow-md: 0 2px 8px rgba(61, 50, 46, .08), 0 1px 2px rgba(61, 50, 46, .04);
    --tw-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --brand-color: var(--tw-brown) !important;
}

.dark {
    --brand-color: var(--tw-coral-hover) !important;
}

/* ---------- Шрифт ---------- */
body,
.font-inter,
button,
input,
select,
textarea {
    font-family: var(--tw-font-sans);
}

/* ---------- Поверхности ---------- */
:where(html:not(.dark)) body { background-color: var(--tw-cream); color: var(--tw-brown); }
:where(html:not(.dark)) .bg-gray-100 { background-color: var(--tw-cream); }
:where(html:not(.dark)) .bg-gray-50 { background-color: #FAF7F2; }
:where(html:not(.dark)) .bg-gray-200 { background-color: var(--tw-cream-deep); }
:where(html:not(.dark)) .bg-gray-300 { background-color: var(--tw-line-2); }
:where(html:not(.dark)) .hover\:bg-gray-50:hover,
:where(html:not(.dark)) .hover\:bg-gray-100:hover,
:where(html:not(.dark)) .focus\:bg-gray-100:focus,
:where(html:not(.dark)) .hover\:bg-gray-200:hover { background-color: var(--tw-cream-hover); }

/* ---------- Линии ---------- */
:where(html:not(.dark)) *,
:where(html:not(.dark)) ::before,
:where(html:not(.dark)) ::after { border-color: var(--tw-line); }
:where(html:not(.dark)) .border-gray-100,
:where(html:not(.dark)) .border-gray-200,
:where(html:not(.dark)) .border-gray-300 { border-color: var(--tw-line); }
:where(html:not(.dark)) .border-gray-400,
:where(html:not(.dark)) .hover\:border-gray-400:hover,
:where(html:not(.dark)) .focus\:border-gray-400:focus { border-color: var(--tw-ink-4); }

/* ---------- Текст ---------- */
:where(html:not(.dark)) .text-gray-900 { color: var(--tw-ink); }
:where(html:not(.dark)) .text-gray-800 { color: var(--tw-brown); }
:where(html:not(.dark)) .text-gray-700 { color: #4A3E39; }
:where(html:not(.dark)) .text-gray-600 { color: var(--tw-ink-3); }
:where(html:not(.dark)) .text-gray-500 { color: #7D6F68; }
:where(html:not(.dark)) .text-gray-400 { color: var(--tw-ink-4); }
:where(html:not(.dark)) .text-brandColor,
:where(html:not(.dark)) .hover\:text-brandColor:hover { color: var(--tw-coral-text); }

/* ---------- Синие акценты Krayin → коралл Timeweb ---------- */
:where(html:not(.dark)) .text-blue-500,
:where(html:not(.dark)) .text-blue-600,
:where(html:not(.dark)) .text-blue-700,
:where(html:not(.dark)) .hover\:text-blue-600:hover,
:where(html:not(.dark)) .hover\:text-blue-700:hover { color: var(--tw-coral-text); }
:where(html:not(.dark)) .bg-blue-500,
:where(html:not(.dark)) .bg-blue-600 { background-color: var(--tw-coral-text); }
:where(html:not(.dark)) .hover\:bg-blue-600:hover,
:where(html:not(.dark)) .hover\:bg-blue-700:hover { background-color: var(--tw-coral-deep); }
:where(html:not(.dark)) .bg-blue-50,
:where(html:not(.dark)) .bg-\[\#eff6ff\] { background-color: var(--tw-coral-tint); }
:where(html:not(.dark)) .bg-blue-100,
:where(html:not(.dark)) .hover\:bg-blue-100:hover { background-color: var(--tw-coral-soft); }
:where(html:not(.dark)) .border-blue-500,
:where(html:not(.dark)) .border-blue-600 { border-color: var(--tw-coral); }
:where(html:not(.dark)) .bg-pink-400 { background-color: var(--tw-coral-text); }

/* ---------- Кнопки ---------- */
.primary-button,
.secondary-button,
.transparent-button {
    border-radius: 4px;
}
:where(html:not(.dark)) .primary-button {
    background-color: var(--tw-brown);
    border-color: var(--tw-brown);
    color: #FFFFFF;
}
:where(html:not(.dark)) .primary-button:hover,
:where(html:not(.dark)) .primary-button:focus {
    background-color: var(--tw-brown-soft);
    border-color: var(--tw-brown-soft);
    opacity: 1;
}
:where(html:not(.dark)) .secondary-button {
    border-width: 1px;
    border-color: var(--tw-line-2);
    background-color: var(--tw-paper);
    color: var(--tw-brown);
}
:where(html:not(.dark)) .secondary-button:hover,
:where(html:not(.dark)) .secondary-button:focus {
    border-color: var(--tw-brown);
    background-color: var(--tw-cream);
}
:where(html:not(.dark)) .transparent-button { color: var(--tw-ink-3); }

/* ---------- Боковое меню: активный пункт — коричневый с коралловой меткой ---------- */
:where(html:not(.dark)) .sidebar-rounded .bg-brandColor {
    background-color: var(--tw-brown);
    box-shadow: inset 3px 0 0 var(--tw-coral);
}

/* ---------- Тени, выделение, скроллбар ---------- */
:where(html:not(.dark)) .box-shadow { box-shadow: var(--tw-shadow-md); }
::selection { background-color: rgba(220, 102, 85, .22); }
:where(html:not(.dark)) ::-webkit-scrollbar-track { background: var(--tw-cream); }
:where(html:not(.dark)) ::-webkit-scrollbar-thumb { background: var(--tw-line-2); }
:where(html:not(.dark)) ::-webkit-scrollbar-thumb:hover { background: var(--tw-ink-4); }
:where(html:not(.dark)) * { scrollbar-color: var(--tw-line-2) var(--tw-cream); }

/* ---------- Логотип ---------- */
img[src*="timeweb/logo"] {
    width: auto !important;
    height: 40px;
    max-width: none;
}
.dark img[src*="timeweb/logo.svg"] {
    content: url('logo-white.svg');
}