:root {
    --accent: #820100;
    --accent-dark: #650100;

    --bg: #f5f6f8;
    --surface: #fff;
    --surface-2: #f8fafc;

    --line: #e5e7eb;
    --line-2: #d1d5db;

    --text: #181412;
    --muted: #667085;
    --soft: #98a2b3;
    --icon: #667085;

    --deep-red: #3b0505;

    --radius: 16px;
    --shadow: 0 18px 54px rgba(15, 23, 42, .09);
    --container: 1480px;
    --page-gutter: 24px;

    /* --mg-* aliases for catalog module */
    --mg-accent: var(--accent);
    --mg-accent-dark: var(--accent-dark);
    --mg-bg: var(--bg);
    --mg-surface: var(--surface);
    --mg-surface-2: var(--surface-2);
    --mg-line: var(--line);
    --mg-line-2: var(--line-2);
    --mg-text: var(--text);
    --mg-muted: var(--muted);
    --mg-soft: var(--soft);
    --mg-success: #14803c;
    --mg-success-bg: #ecfdf3;
    --mg-warn: #b45309;
    --mg-warn-bg: #fffbeb;
    --mg-blue: #2563eb;
    --mg-blue-bg: #eff6ff;
    --mg-radius: 16px;
    --mg-radius-lg: 22px;
    --mg-shadow: var(--shadow);
    --mg-container: var(--container);
}

@media (max-width: 960px) {
    :root {
        --page-gutter: 16px;
    }
}