/* ========== THEME TOKENS ========== */
:root {
    /* Brand */
    --rlv-primary: #3F4A8D;
    --rlv-primary-600: #34407a;
    --rlv-primary-500: #3F4A8D;
    --rlv-primary-100: #e0e5f7;

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

    /* Surfaces — более мягкий голубой */
    --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-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);

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

/* DARK OVERRIDES */
: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-text-inv: #ffffff;

    --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);
}

/* ========== 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%);
}

/* Dark bg — мягкий ночной градиент */
: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;
}

/* ========== 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;
}

/* make Radzen base colors adapt a bit */
:root[data-theme="dark"] .rz-card,
:root[data-theme="dark"] .rz-datatable,
:root[data-theme="dark"] .rz-fieldset,
:root[data-theme="dark"] .rz-panel {
    background: var(--rlv-surface);
    color: var(--rlv-text);
    border-color: #1e2847;
}