:root {
    --primary: #2563eb;
    --primary-light: #3b82f6;
    --primary-soft: #dbeafe;
    --sidebar-dark: #1e3a8a;
    --sidebar-deep: #1d4ed8;
    --sidebar-highlight: rgba(96, 165, 250, 0.35);
    --surface-bg-start: #f8fafc;
    --surface-bg-end: #eef4ff;
    --page-bg-start: #e9eef5;
    --page-bg-end: #dbe3ee;
    --topbar-bg-start: #ffffff;
    --topbar-bg-end: #f8fbff;
    --menu-hover-bg: #dbeafe;
    --menu-hover-text: #1e3a8a;
    --text-main: #0f172a;
    --text-soft: #475569;
    --text-inverse: #ffffff;
    --border-soft: #e5e7eb;
    --border-strong: rgba(203, 213, 225, 0.9);
    --card-bg: #ffffff;
    --success: #15803d;
    --danger: #dc2626;
    --warning: #f59e0b;
    --shadow-soft: 0 8px 20px rgba(0,0,0,0.08);
    --shadow-strong: 0 14px 32px rgba(15,23,42,0.12);
    --sidebar-text: rgba(255,255,255,0.96);
    --sidebar-muted: rgba(255,255,255,0.85);
    --glass-bg: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.14);
}

body {
    background: linear-gradient(135deg, var(--page-bg-start), var(--page-bg-end));
    color: var(--text-main);
}

.sidebar {
    background:
        radial-gradient(circle at top left, var(--sidebar-highlight), transparent 35%),
        linear-gradient(180deg, var(--sidebar-dark) 0%, var(--sidebar-dark) 45%, var(--sidebar-deep) 100%);
    color: var(--sidebar-text);
}

.brand-box {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.topbar {
    background: linear-gradient(135deg, var(--topbar-bg-start), var(--topbar-bg-end));
}

.content-surface {
    background: linear-gradient(135deg, var(--surface-bg-start) 0%, var(--surface-bg-end) 100%);
    border: 1px solid var(--border-strong);
}

.topbar-refresh-btn,
.btn-primary,
.premium-btn-primary {
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    border-color: var(--primary);
    color: #fff;
}