:root {
    /* Core palette */
    --vs-color-surface: #ffffff;
    --vs-color-surface-subtle: #f8fafc;
    --vs-color-text: #1f2937;
    --vs-color-text-strong: #111827;
    --vs-color-text-secondary: #475569;
    --vs-color-text-muted: #6b7280;
    --vs-color-border: #e8edf5;
    --vs-color-control-border: #dbe4f0;
    --vs-color-primary: #3b82f6;
    --vs-color-primary-hover: #2563eb;
    --vs-color-primary-focus: #bfdbfe;
    --vs-color-success: #10b981;
    --vs-color-danger: #b91c1c;

    /* Shared shape and elevation */
    --vs-radius-control: 14px;
    --vs-radius-card: 18px;
    --vs-radius-card-large: 22px;
    --vs-shadow-card: 0 6px 18px rgba(15, 23, 42, 0.04);
    --vs-shadow-primary: 0 8px 18px rgba(59, 130, 246, 0.22);
    --vs-focus-primary: 0 0 0 4px rgba(59, 130, 246, 0.08);
}