:root {
    --ms-bg: #f4f8ff;
    --ms-surface: #ffffff;
    --ms-surface-soft: #eaf3ff;

    --ms-text: #0e1f35;
    --ms-muted: #60748f;

    --ms-primary: #2563eb;
    --ms-primary-dark: #1d4ed8;
    --ms-primary-soft: #e0ecff;

    --ms-accent: #06b6d4;

    --ms-border: #d4e3f8;

    --ms-shadow: 0 28px 80px rgba(37, 99, 235, 0.18);
    --ms-shadow-soft: 0 18px 52px rgba(37, 99, 235, 0.11);
}

body {
    background:
        radial-gradient(circle at top left, rgba(6, 182, 212, 0.18), transparent 34%),
        linear-gradient(180deg, #f4f8ff 0%, #edf5ff 100%);
    color: var(--ms-text);
}

.ms-header {
    background: rgba(255, 255, 255, 0.86);
    border-bottom: 1px solid var(--ms-border);
    backdrop-filter: blur(18px);
}

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

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

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

.ms-card,
.ms-info-card,
.ms-article-card,
.ms-sidebar-card {
    border-color: var(--ms-border);
    box-shadow: var(--ms-shadow-soft);
}