:root {
    --ms-bg: #0f172a;
    --ms-surface: #111c33;
    --ms-surface-soft: #17233d;

    --ms-text: #eef4ff;
    --ms-muted: #a7b4c8;

    --ms-primary: #38bdf8;
    --ms-primary-dark: #0ea5e9;
    --ms-primary-soft: rgba(56, 189, 248, 0.16);

    --ms-accent: #a78bfa;

    --ms-border: rgba(226, 232, 240, 0.16);

    --ms-shadow: 0 28px 90px rgba(0, 0, 0, 0.34);
    --ms-shadow-soft: 0 18px 56px rgba(0, 0, 0, 0.24);
}

body {
    background:
        radial-gradient(circle at top left, rgba(56, 189, 248, 0.22), transparent 34%),
        radial-gradient(circle at top right, rgba(167, 139, 250, 0.18), transparent 30%),
        linear-gradient(180deg, #0f172a 0%, #111827 100%);
    color: var(--ms-text);
}

.ms-header {
    background: rgba(15, 23, 42, 0.82);
    border-bottom: 1px solid var(--ms-border);
    backdrop-filter: blur(18px);
}

.ms-logo-text,
.ms-nav a,
.ms-footer-logo,
.ms-footer-column h3 {
    color: var(--ms-text);
}

.ms-nav a:hover,
.ms-footer-links a:hover {
    color: var(--ms-primary);
}

.ms-logo-mark {
    background: linear-gradient(135deg, var(--ms-primary), var(--ms-accent));
}

.ms-header-cta,
.ms-button {
    background: var(--ms-primary);
    color: #07111f;
}

.ms-header-cta:hover,
.ms-button:hover {
    background: var(--ms-primary-dark);
    color: #ffffff;
}

.ms-card,
.ms-info-card,
.ms-article-card,
.ms-sidebar-card,
.ms-page-content,
.ms-faq-item {
    background: var(--ms-surface);
    border-color: var(--ms-border);
    box-shadow: var(--ms-shadow-soft);
}

.ms-footer {
    background: #0b1120;
    border-top: 1px solid var(--ms-border);
}