@import url('Brand.css');

:root {
    /* Видеосцена комнаты всегда тёмная (контракт): сценовые переменные
       не тематизируются, значения — прод-дарк поверхности. */
    --body-bg: var(--scene-bg);
    --scene-border: 0.5px solid rgb(255 255 255 / 18%);
    --border-radius: var(--r-lg);
    --msger-width: 800px;
    --msger-height: 700px;
    --msger-bubble-width: 85%;
    --msger-bg: var(--surface-0);
    --wb-width: 1920px;
    --wb-height: 1080px;
    --wb-bg: var(--scene-bg);
    --select-bg: #24211f;
    --select-border-radius: var(--r-md);
    --select-focus-color: color-mix(in srgb, var(--accent) 50%, transparent);
    --left-msg-bg: var(--surface-1);
    --right-msg-bg: var(--surface-2);
    --private-msg-bg: var(--accent-dark);
    --box-shadow: var(--shadow);
    --btns-hover-scale: scale(1.1);
    --settings-bg: var(--surface-0);
    --tab-btn-active: var(--surface-2);
    --btns-bg-color: rgba(10, 10, 14, 0.8);

    /* Сценовые легаси-переменные: использовались, но нигде не были определены */
    --border-color: rgb(255 255 255 / 18%);
    --body-color: #f7f3ea;
    --btns-color: #f7f3ea;
    --text-color: #f7f3ea;

    /* Сценовые токены (добавлены при свипе легаси-hex): сцена всегда тёмная,
       эти значения не тематизируются. */
    --scene-surface: #171514;
    --scene-muted: #a89a86;

    /* bottom buttons bar horizontal default */
    --bottom-btns-top: auto;
    --bottom-btns-left: 50%;
    --bottom-btns-bottom: 0;
    --bottom-btns-translate-X: -50%;
    --bottom-btns-translate-Y: 0%;
    --bottom-btns-margin-bottom: 18px;
    --bottom-btns-flex-direction: row;

    --transcription-height: 680px;
    --transcription-width: 420px;
    --trx-bg: var(--scene-bg);

    --editor-container-width: 100%;
    --editor-container-height: 100%;
    --editor-height: 85vh;

    --vmi-wh: 15vw;
    /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */
    --videoObjFit: cover;

    --dd-color: #e8e8ec;

    --videoBar-active: 1px solid rgba(212, 0, 15, 0.32);

    /* Design tokens (additive, non-breaking) — семантика из Brand.css */
    --color-accent: var(--accent);
    --color-accent-strong: var(--accent-dark);
    --color-accent-soft: var(--accent-weak);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--error);
    --color-danger-strong: var(--error);
    --color-focus: color-mix(in srgb, var(--accent) 65%, transparent);

    /* Z-index */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 900;
    --z-modal: 1000;
    --z-toast: 1100;
    --z-tooltip: 1200;
    --z-critical: 2000;
}

* {
    outline: none;
    font-family: var(--ff-sans);
}

*:focus-visible {
    outline: 2px solid var(--select-focus-color);
    outline-offset: 2px;
}

:where(button, a, input, select, textarea, [role='button'], [tabindex]):focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}