/* ========== THEME TOKENS ==========
   Hybrid setup: Radzen material/material-dark base + brand overrides.
   Radzen-компоненты темнятся встроенным material-dark.css (см. _Host).
   Здесь — только brand-токены, маппинг на Radzen-vars и бэкграунд. */
:root {
    /* Brand */
    --rlv-primary: #3F4A8D;
    --rlv-primary-600: #34407a;
    --rlv-primary-500: #3F4A8D;
    --rlv-primary-100: #e0e5f7;

    /* Брендовый цвет как ПЕРЕДНИЙ план (ссылки, иконки) — в тёмной теме
       осветляется. Сам --rlv-primary трогать нельзя: он же красит фон
       хедера и сайдбара, и осветление сделало бы их голубыми. */
    --rlv-primary-fg: var(--rlv-primary);

    --rlv-accent: #35a0d7;
    --rlv-success: #34e536;
    --rlv-warning: #ffc107;
    --rlv-danger: #f44336;

    /* Surfaces — голубоватый light-фон */
    --rlv-bg: #dfe7f7;
    --rlv-bg-soft: #e7edf9;
    --rlv-surface: #f5f7fd;
    --rlv-surface-2: #e9eff9;

    /* Text */
    --rlv-text: #111827;
    --rlv-text-soft: #5b647a;
    --rlv-text-inv: #ffffff;

    /* Radius / shadow */
    --rlv-radius-sm: 10px;
    --rlv-radius-md: 14px;
    --rlv-radius-lg: 20px;
    --rlv-radius-card: 22px;
    --rlv-radius-pill: 999px;

    --rlv-shadow-sm: 0 1px 2px rgba(15, 23, 42, .10);
    --rlv-shadow-md: 0 6px 18px rgba(15, 23, 42, .16);
    --rlv-shadow-lg: 0 12px 32px rgba(15, 23, 42, .22);
    --rlv-shadow-card: 0 8px 28px rgba(15, 23, 42, .14);

    /* Colored glows для CTA */
    --rlv-glow-primary: 0 10px 24px rgba(63, 74, 141, .4);
    --rlv-glow-success: 0 10px 24px rgba(22, 163, 74, .4);
    --rlv-glow-danger:  0 10px 24px rgba(239, 68, 68, .35);

    /* Motion */
    --rlv-ease: cubic-bezier(.2, .8, .2, 1);
    --rlv-fast: 120ms;
    --rlv-med: 220ms;

    /* === Brand → Radzen mapping ===
       Перекрывает --rz-primary, чтобы Radzen-кнопки/иконки приняли наш
       брендный цвет в обоих темах. */
    --rz-primary: var(--rlv-primary);
    --rz-primary-dark: var(--rlv-primary-600);
    --rz-primary-light: var(--rlv-primary-100);
}

:root[data-theme="dark"] {
    --rlv-bg: #050814;
    --rlv-bg-soft: #0b1020;
    --rlv-surface: #0f1424;
    --rlv-surface-2: #0b1020;

    --rlv-text: #e6e9f2;
    --rlv-text-soft: #a9b0c3;

    /* Тот же оттенок, что --rlv-dialog-accent в dialogs.css */
    --rlv-primary-fg: #b6c1ff;

    --rlv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .45);
    --rlv-shadow-md: 0 8px 22px rgba(0, 0, 0, .55);
    --rlv-shadow-lg: 0 14px 36px rgba(0, 0, 0, .65);
    --rlv-shadow-card: 0 10px 30px rgba(0, 0, 0, .5);
}

/* ========== APP BACKGROUND ========== */
.rlv-app-bg {
    background: radial-gradient(1200px circle at 0% 0%, #d2e1ff 0%, transparent 60%),
    radial-gradient(1200px circle at 100% 0%, #ccecff 0%, transparent 55%),
    linear-gradient(180deg, var(--rlv-bg) 0%, #d7e3fb 100%);
}

:root[data-theme="dark"] .rlv-app-bg {
    background: radial-gradient(1000px circle at 0% 0%, #1a2140 0%, transparent 60%),
    radial-gradient(1000px circle at 100% 0%, #15243a 0%, transparent 55%),
    linear-gradient(180deg, var(--rlv-bg) 0%, #050814 100%);
}

@keyframes rlv-float {
    0%   { background-position: 0% 0%, 100% 0%, 0% 0%; }
    50%  { background-position: 2% 3%, 98% 2%, 0% 0%; }
    100% { background-position: 0% 0%, 100% 0%, 0% 0%; }
}

.rlv-app-bg.animated {
    animation: rlv-float 18s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .rlv-app-bg.animated {
        animation: none;
    }
    .rlv-hover {
        transition: none;
    }
}

/* Плавный кросс-фейд при переключении dark/light */
body,
.rlv-app-bg,
.rz-card,
.rz-panel,
.rz-fieldset,
.rz-datatable {
    transition: background-color var(--rlv-med) var(--rlv-ease),
                color var(--rlv-med) var(--rlv-ease);
}

/* ========== TYPO ========== */
.rlv-h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--rlv-text);
    margin: 0 0 8px;
}

.rlv-h2 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--rlv-text);
    margin: 0 0 8px;
}

.rlv-sub {
    color: var(--rlv-text-soft);
    font-size: .98rem;
}

/* ========== MOTION HELPERS ========== */
.rlv-hover {
    transition: transform var(--rlv-med) var(--rlv-ease),
                box-shadow var(--rlv-med) var(--rlv-ease);
}

.rlv-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--rlv-shadow-md);
}

.rlv-clickable {
    cursor: pointer;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}