/* Скины прототипа учёта (запрос Андрея 01.10): переключатель в топбаре, выбор — в localStorage.
   Дефолт — нейтральный графит. Без фиолета и ярко-жёлтого. Акцент магазина — #00549B. */

/* 1. Графит (по умолчанию) */
:root,
html[data-skin="graphite"] {
    --primary-50: #f6f7f8;
    --primary-100: #ecedef;
    --primary-200: #d9dbde;
    --primary-300: #bfc3c7;
    --primary-400: #9ba1a8;
    --primary-500: #6e757d;
    --primary-600: #4b5563;
    --primary-700: #3e454d;
    --primary-800: #2e3338;
    --primary-900: #1f2327;
    --primary-950: #121518;
}

/* 2. Акцент магазина #00549B */
html[data-skin="store"] {
    --primary-50: #ebf3fa;
    --primary-100: #d7e6f5;
    --primary-200: #afcdea;
    --primary-300: #86b4e0;
    --primary-400: #5d9bd5;
    --primary-500: #1b6ec0;
    --primary-600: #00549b;
    --primary-700: #004480;
    --primary-800: #003563;
    --primary-900: #002647;
    --primary-950: #00172b;
}

/* 3. Хвоя (сдержанный зелёный) */
html[data-skin="forest"] {
    --primary-50: #e9f6ee;
    --primary-100: #d2ecde;
    --primary-200: #a5d9bd;
    --primary-300: #78c69c;
    --primary-400: #4bb37b;
    --primary-500: #249455;
    --primary-600: #1e7a46;
    --primary-700: #196338;
    --primary-800: #144c2b;
    --primary-900: #0e3520;
    --primary-950: #082014;
}

/* 4. Бордо (тёмно-красный, не фиолет) */
html[data-skin="crimson"] {
    --primary-50: #fbeaef;
    --primary-100: #f7d3de;
    --primary-200: #edacbf;
    --primary-300: #dc7b95;
    --primary-400: #c94a6d;
    --primary-500: #b4294e;
    --primary-600: #9f1239;
    --primary-700: #830e30;
    --primary-800: #670a25;
    --primary-900: #4b071b;
    --primary-950: #30040f;
}

/* 5. Мобильный стандарт: инпуты и кнопки от 44px */
.fi-btn,
.fi-icon-btn,
.fi-input,
.fi-select-input,
.fi-input-wrp input,
.fi-input-wrp select {
    min-height: 44px;
}
.fi-icon-btn {
    min-width: 44px;
}
.fi-textarea {
    min-height: 88px;
}
.fi-checkbox-input,
.fi-radio-input {
    width: 20px;
    height: 20px;
}

/* На узких экранах переключатель скинов компактный */
@media (max-width: 480px) {
    #xs-skin-switcher {
        max-width: 130px;
        font-size: 12px;
        padding: 2px 6px;
        min-height: 36px;
    }
}