/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
    Система дизайна.

    Заметки по использованию:
    * Для пар ch указаны пронумерованные варианты, это для градиентов.
        Это нужно, потому что разные константы имеют разный спред оттенков, из-за разницы в функции цвета и его восприятии.
    * Уровень яркости отталкиваются от брендовых констант, пришедших из бренд-бука.
 ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

 @layer theme-constants {
    :root {
        /* констата: бренд 1 (темнейший) */
        --const1-ch: 0.09838 298.955;
        --const1-l: 0.236;

        /* констата: бренд 2 */
        --const2-ch: 0.11689 301.38;
        --const2-l: 0.295;

        /* констата: бренд 3 */
        --const3-ch: 0.10262 312.865;
        --const3-l: 0.405;

        /* констата: бренд 4 */
        --const4-ch: 0.06662 288.636;
        --const4-l: 0.779;

        /* констата: бренд 5 */
        --const5-ch: 0.0001 271.152;
        --const5-l: 0.894;

        /* констата: бренд 6 (светлейший) */
        --const6-ch: 0.00011 271.152;
        --const6-l: 0.971;

        /* констата: акцент */
        --constA-ch: 0.20 50.00;

        /* констата: опасность */
        --constD-ch: 0.37 25.00;

        /* констата: предупреждение */
        --constW-ch: 0.24 95.00;

        /* констата: успех */
        --constS-ch: 0.22 136.04;
    }
}

@layer theme-main {
    .syd-dark {
        --theme-maxcontrast-l: 1.0;
    }

    .syd-light {
        --theme-maxcontrast-l: 0.0;
    }

    .syd-dark.syd-level1,
    .syd-dark .syd-level1 {
        --theme-base-l: var(--const1-l);
        --theme-base-ch: var(--const1-ch);
        --theme-chalk-l: var(--const4-l);
        --theme-chalk-ch: var(--const4-ch);
        --theme-chrome-l-shift: 0.1;
        --theme-glass-l-shift: -0.05;
    }

    .syd-dark.syd-level2,
    .syd-dark .syd-level2 {
        --theme-base-l: var(--const2-l);
        --theme-base-ch: var(--const2-ch);
        --theme-chalk-l: var(--const5-l);
        --theme-chalk-ch: var(--const5-ch);
        --theme-chrome-l-shift: 0.1;
        --theme-glass-l-shift: -0.07;
    }

    .syd-dark.syd-level3,
    .syd-dark .syd-level3 {
        --theme-base-l: var(--const3-l);
        --theme-base-ch: var(--const3-ch);
        --theme-chalk-l: var(--const6-l);
        --theme-chalk-ch: var(--const6-ch);
        --theme-chrome-l-shift: 0.1;
        --theme-glass-l-shift: -0.09;
    }

    .syd-light.syd-level1,
    .syd-light .syd-level1 {
        --theme-base-l: var(--const6-l);
        --theme-base-ch: var(--const6-ch);
        --theme-chalk-l: var(--const3-l);
        --theme-chalk-ch: var(--const3-ch);
        --theme-chrome-l-shift: 0.4;
        --theme-glass-l-shift: +0.03;
    }

    .syd-light.syd-level2,
    .syd-light .syd-level2 {
        --theme-base-l: var(--const5-l);
        --theme-base-ch: var(--const5-ch);
        --theme-chalk-l: var(--const2-l);
        --theme-chalk-ch: var(--const2-ch);
        --theme-chrome-l-shift: 0.4;
        --theme-glass-l-shift: +0.08;
    }

    .syd-light.syd-level3,
    .syd-light .syd-level3 {
        --theme-base-l: var(--const4-l);
        --theme-base-ch: var(--const4-ch);
        --theme-chalk-l: var(--const1-l);
        --theme-chalk-ch: var(--const1-ch);
        --theme-chrome-l-shift: 0.4;
        --theme-glass-l-shift: +0.19;
    }

    .syd-neutral {
        --palette-tint-ch: var(--theme-chalk-ch);
    }

    .syd-accent {
        --palette-hue-spread: -30;
        --palette-tint-ch: var(--constA-ch);
    }

    .syd-warning {
        --palette-tint-ch: var(--constW-ch);
    }

    .syd-danger {
        --palette-hue-spread: 8;
        --palette-tint-ch: var(--constD-ch);
    }

    .syd-success {
        --palette-tint-ch: var(--constS-ch);
    }
}

@layer theme-calc {
    .syd-dark,
    .syd-light,
    .syd-level1,
    .syd-level2,
    .syd-level3,
    .syd-neutral,
    .syd-accent,
    .syd-warning,
    .syd-danger,
    .syd-success {
        --maxcontrast-l: var(--theme-maxcontrast-l);
        --maxcontrast: oklch(var(--maxcontrast-l) 0 0);
    
        --mincontrast-l: calc(1.0 - var(--theme-maxcontrast-l));
        --mincontrast: oklch(var(--mincontrast-l) 0 0);
    
        --paper-l: var(--theme-base-l);
        --paper-ch: var(--theme-base-ch);
        --ink-l: calc(var(--theme-chalk-l) * 0.75 + var(--theme-maxcontrast-l) * 0.25);
        --ink-ch: var(--theme-chalk-ch);

        --hue-spread: var(--palette-hue-spread, 20);
        --glass-l: calc(var(--paper-l) + var(--theme-glass-l-shift));
        --chrome-l: calc(var(--ink-l) + var(--theme-chrome-l-shift));
        --tint-ch: var(--palette-tint-ch, var(--theme-chalk-ch));
    }
}

/* Короткий стиль "syd" используется для автоматического применения стилей к элементам типа кнопки или поля ввода, без необходимости указания полного имени класса. */

@layer element {
    .syd-text {
        color: oklch(var(--ink-l) var(--ink-ch));
    }

    .syd-content {
        color: oklch(var(--ink-l) var(--theme-chalk-ch));
        background-color: oklch(var(--paper-l) var(--paper-ch));
    }

    .syd-content-pretty {
        --self-bg: oklch(var(--paper-l) var(--paper-ch));
        color: oklch(var(--ink-l) var(--theme-chalk-ch));
        background-color: var(--self-bg);
        background: linear-gradient(in oklch to bottom right, oklch(from var(--self-bg) l c calc(h - var(--hue-spread))) 0%, oklch(from var(--self-bg) l c calc(h + var(--hue-spread))) 100%);
    }

    .syd-attention {
        color: oklch(var(--chrome-l) var(--tint-ch));
        background-color: oklch(var(--glass-l) var(--paper-ch));
        padding: 0.5rem;
        padding-left: 1rem;
        position: relative;
    }

    .syd-attention::before {
        content: " ";
        position: absolute;
        inset: 0;
        right: unset;
        width: 0.3rem;
        border-top-right-radius: 0.3rem;
        border-bottom-right-radius: 0.3rem;
        background-color: var(--attention-ink);
    }

    .syd-button, button.syd {
        display: flex;
        gap: 0.5rem;
        --button-ink: oklch(var(--ink-l) var(--tint-ch));
        --button-chrome: oklch(var(--chrome-l) var(--tint-ch));
        --button-glass: oklch(var(--glass-l) var(--paper-ch));
        color: var(--button-ink);
        background-color: var(--button-glass);
        border: 0.11rem outset var(--button-chrome);
        border-radius: 3rem;
        padding: 0.5rem 1.25rem;
        font-weight: 500;
    }

    .syd-button:hover, button.syd:hover {
        --button-ink: var(--mincontrast);
        background: linear-gradient(in oklch to bottom right, oklch(from var(--button-chrome) l c calc(h - var(--hue-spread))) 0%, oklch(from var(--button-chrome) l c calc(h + var(--hue-spread))) 100%);
    }
}

/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
    total-redux

    Это скоп для восстановления истинных стилей Бустрапа.
    (Стили Бустрапа были затёрты из-за смерживания нескольких страниц с разными стилями.)
    Временное (?) решение на момент тотального рефакторинга фронтенда.

    FIXME Убрать этот костыль, когда отпадёт нужна в нём.
 ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

.total-redux {
    color: var(--bs-body-color);
    --bs-modal-color: var(--bs-body-color);

    & .form-control {
        display: block;
        width: 100%;
        padding: .375rem .75rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--bs-body-color);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: var(--bs-body-bg);
        background-clip: padding-box;
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    }

    & .modal-content {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        color: var(--bs-modal-color);
        pointer-events: auto;
        background-color: var(--bs-modal-bg);
        background-clip: padding-box;
        border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
        border-radius: var(--bs-modal-border-radius);
        outline: 0;
    }
}

/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
    Экзистенциальное.
 ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

@layer ultimatum {
    .removed {
        display: none !important;
        visibility: hidden !important;
    }

    .hidden {
        visibility: hidden !important;
    }
}

/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
    Утилиты.
 ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

@layer {
    .ghostly {
        opacity: 0.35;
    }

    .inertable[inert] {
        opacity: 0.3;
        cursor: not-allowed;
        pointer-events: none;
        user-select: none;
    }

    .bg-extreme {
        --stripe-color-1: var(--bs-red);
        --stripe-color-2: var(--bs-yellow);
        --stripe-size: 1rem;
        background-image: linear-gradient(45deg, var(--stripe-color-1) 25%, var(--stripe-color-2) 25%, var(--stripe-color-2) 50%, var(--stripe-color-1) 50%, var(--stripe-color-1) 75%, var(--stripe-color-2) 75%, var(--stripe-color-2) 100%);
        background-size: var(--stripe-size) var(--stripe-size);
    }

    .cursor-pointer {
        cursor: pointer;
    }

    .img-tint-color-a {
        filter: sepia(100%) saturate(100000%) brightness(70%) hue-rotate(331deg);
    }
}

/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
    Элементы.
 ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

@layer element {
    .btn-icon {
        float: left;
        margin-right: 1rem;
        height: 1lh;
    }

    .btn-text-left {
        float: left;
        margin-right: 1rem;
    }

    .thead-sticky {
        position: sticky;
        top: 0px;
        /* Необходимj для sticky. */
        z-index: 1;
        border-color: inherit;
        border-style: solid;
        border-width: 0;
        border-bottom-width: var(--bs-border-width);
        background-color: var(--bs-secondary-bg);
        box-shadow: 0rem 0.0rem 1.0rem black;
    }

    .shiny-text {
        background-image: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%),
            radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
        color: transparent;
        background-clip: text;
    }
}

/* ========== ========== ========== ========== ========== ========== ========== ========== ========== ==========
    Палитры.
 ========== ========== ========== ========== ========== ========== ========== ========== ========== ========== */

@layer palette {
    /* TODO Разобаться с цветовой схемой. */
    /* TODO Вынести брендовые цвета в отдельную палитру. */

    .btn-color-a {
        --bs-btn-color: #fff;
        --bs-btn-bg: #593610;
        --bs-btn-border-color: rgba(255, 139, 15, 0.3);
        --bs-btn-hover-color: #fff;
        --bs-btn-hover-bg: #ff8b0d;
        --bs-btn-hover-border-color: #d8750b;
        --bs-btn-focus-shadow-rgb: 253, 154, 48;
        --bs-btn-active-color: #fff;
        --bs-btn-active-bg: #d8750b;
        --bs-btn-active-border-color: #ca6d0a;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
        --bs-btn-disabled-color: #fff;
        --bs-btn-disabled-bg: #593610;
        --bs-btn-disabled-border-color: #593610;
        --bs-btn-focus-shadow-rgb: 0 0 0;
    }

    .text-color-a {
        color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
        --bs-body-color-rgb: 255, 139, 13;
    }
}