/**
 * KUBIT · официальная палитра и UI-токены
 * Источник: brand kit (SVG), electric / darkblue / coolblue / ink
 */

:root {
    --kubit-electric: #273b96;
    --kubit-blue: #263b96;
    --kubit-blue-mid: #22317e;
    --kubit-blue-deep: #1e2662;
    --kubit-navy: #1b1f52;
    --kubit-deep: #1b1d4c;
    --kubit-ink: #111922;
    --kubit-cool: #d9e2eb;
    --kubit-white: #ffffff;
    --kubit-gradient: linear-gradient(135deg, #263b96 0%, #22317e 46%, #1b1d4c 100%);
    --kubit-gradient-soft: linear-gradient(180deg, #eef2f8 0%, #e4eaf3 100%);
    --kubit-font: "SF Pro Display", "Segoe UI Variable", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --kubit-radius-sm: 10px;
    --kubit-radius-md: 16px;
    --kubit-radius-lg: 22px;
    --kubit-radius-xl: 30px;
    --kubit-shadow: 0 18px 42px rgba(17, 25, 34, 0.16);
    --kubit-shadow-soft: 0 8px 28px rgba(17, 25, 34, 0.08);
}

/* Тёмная тема: сайт, админ-пульт */
.kubit-theme-dark {
    --bg: #0a101c;
    --sidebar: #111922;
    --panel: #161f32;
    --paper: rgba(18, 28, 46, 0.92);
    --paper-strong: rgba(17, 25, 34, 0.96);
    --paper-soft: rgba(22, 31, 50, 0.82);
    --card: rgba(18, 28, 46, 0.88);
    --ink: #f4f7fb;
    --muted: #9fb0c9;
    --line: rgba(217, 226, 235, 0.11);
    --line-strong: rgba(217, 226, 235, 0.18);
    --accent: var(--kubit-electric);
    --accent2: var(--kubit-cool);
    --teal: var(--kubit-electric);
    --gold: #8ea4dc;
    --gold-soft: rgba(142, 164, 220, 0.16);
    --sage: var(--kubit-blue);
    --sage-soft: rgba(38, 59, 150, 0.2);
    --deep: var(--kubit-deep);
    --night: var(--kubit-ink);
    --cream: var(--kubit-cool);
    --warn: #d4845a;
    --ok: #4caf7a;
    --chat-bg: #080d16;
    --shadow: 0 22px 60px rgba(2, 8, 18, 0.38);
    --glow: 0 34px 90px rgba(17, 29, 76, 0.35);
    --r-md: var(--kubit-radius-md);
    --r-lg: var(--kubit-radius-lg);
    --r-xl: var(--kubit-radius-xl);
    --r-2xl: 38px;
}

/* Светлая тема: кабинет, портал */
.kubit-theme-light {
    --bg: #e8eef5;
    --sidebar: #ffffff;
    --panel: #ffffff;
    --paper: rgba(255, 255, 255, 0.94);
    --paper-strong: #ffffff;
    --card: rgba(255, 255, 255, 0.88);
    --ink: var(--kubit-ink);
    --muted: #5a6878;
    --line: rgba(17, 25, 34, 0.1);
    --line-strong: rgba(17, 25, 34, 0.16);
    --accent: var(--kubit-electric);
    --accent2: var(--kubit-cool);
    --teal: var(--kubit-electric);
    --gold: var(--kubit-electric);
    --gold-soft: rgba(39, 59, 150, 0.1);
    --deep: var(--kubit-deep);
    --deep-soft: rgba(27, 29, 76, 0.06);
    --warn: #a45430;
    --ok: #2c7961;
    --shadow: var(--kubit-shadow-soft);
    --radius-xl: var(--kubit-radius-xl);
    --radius-lg: var(--kubit-radius-lg);
    --radius-md: var(--kubit-radius-md);
    --c-bg: #e8eef5;
    --c-surface: #ffffff;
    --c-surface-2: #f3f6fa;
    --c-border: #d9e2eb;
    --c-ink: var(--kubit-ink);
    --c-muted: #5a6878;
    --c-accent: var(--kubit-electric);
    --c-accent-deep: var(--kubit-deep);
    --c-radius: var(--kubit-radius-md);
    --c-radius-sm: var(--kubit-radius-sm);
    --c-shadow: var(--kubit-shadow-soft);
}

.kubit-theme-dark,
.kubit-theme-light {
    font-family: var(--kubit-font);
    color: var(--ink);
}

.kubit-brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--kubit-gradient);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 10px 24px rgba(17, 25, 34, 0.24);
    overflow: hidden;
}

.kubit-brand-mark img,
.kubit-brand-mark svg {
    width: 72%;
    height: 72%;
    object-fit: contain;
    display: block;
}

.kubit-brand-mark--lg {
    width: 52px;
    height: 52px;
}

.kubit-brand-mark--sm {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.kubit-brand-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: var(--ink);
}

.kubit-brand-subtitle {
    margin: 2px 0 0;
    font-size: 0.82rem;
    line-height: 1.35;
    color: var(--muted);
}

.kubit-theme-dark body,
body.kubit-theme-dark {
    background:
        radial-gradient(circle at 10% 8%, rgba(39, 59, 150, 0.28), transparent 28%),
        radial-gradient(circle at 88% 12%, rgba(217, 226, 235, 0.08), transparent 24%),
        linear-gradient(180deg, #0a101c 0%, #111922 42%, #1b1d4c 100%);
}

.kubit-theme-light body,
body.kubit-theme-light {
    background:
        radial-gradient(circle at 12% 10%, rgba(39, 59, 150, 0.12), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(217, 226, 235, 0.55), transparent 30%),
        var(--kubit-gradient-soft);
}

button.primary,
.btn.primary,
button.accent,
.btn.accent {
    background: var(--kubit-gradient);
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.console-nav button.is-active,
.nav button.active,
.nav button.is-active {
    background: rgba(39, 59, 150, 0.16);
    color: var(--kubit-deep);
}

.kubit-theme-dark .console-nav button.is-active,
.kubit-theme-dark .nav button.active {
    background: rgba(39, 59, 150, 0.28);
    color: var(--kubit-cool);
}

.mark:not(.kubit-brand-mark) {
    background: var(--kubit-gradient) !important;
    color: #fff !important;
    border-radius: 50%;
}

.profile-card,
.console-app .profile-card {
    background: var(--kubit-gradient) !important;
    border: none !important;
}

.status-pill,
.status-line {
    border: 1px solid var(--line);
    background: rgba(217, 226, 235, 0.08);
}

.kubit-hero-logo {
    display: block;
    width: min(560px, 100%);
    max-height: 132px;
    margin: 0 0 18px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 18px 36px rgba(17, 29, 76, 0.28));
}

.kubit-btn-primary,
.btn.btn-primary,
button.btn-primary {
    background: var(--kubit-gradient);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 18px 34px rgba(17, 29, 76, 0.32);
}

.kubit-btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover {
    background: linear-gradient(135deg, #2d449f 0%, #273b96 46%, #222a66 100%);
    color: #fff;
}

.kubit-service-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.kubit-service-card:hover {
    transform: translateY(-2px);
    border-color: rgba(142, 164, 220, 0.24);
    box-shadow: 0 20px 42px rgba(17, 29, 76, 0.28);
}