:root {
    --ui-bg: #f4f7fb;
    --ui-surface: #ffffff;
    --ui-surface-soft: #f8fbff;
    --ui-surface-muted: #f3f6fa;
    --ui-text: #10233f;
    --ui-text-strong: #0b1f3a;
    --ui-text-muted: #667085;
    --ui-border: #d8e2ef;
    --ui-border-strong: #bdd0eb;

    --ui-primary: #2563eb;
    --ui-primary-strong: #1648c6;
    --ui-primary-soft: #edf4ff;
    --ui-success: #138a47;
    --ui-success-soft: #ecfdf3;
    --ui-warning: #b86a00;
    --ui-warning-soft: #fff7e6;
    --ui-danger: #c4322b;
    --ui-danger-soft: #fff0ef;
    --ui-info: #1769d2;
    --ui-info-soft: #eef6ff;

    /* UI-HQA13 — soft tint semantic tokens dùng chung cho KPI/card/action/tab. */
    --ui-purple: #7353c7;
    --ui-purple-soft: #f4f0ff;
    --ui-orange: #c75f00;
    --ui-orange-soft: #fff4e5;
    --ui-revenue: #0f7a7a;
    --ui-revenue-soft: #eafafa;
    --ui-neutral-soft: #f6f8fb;

    /* DASHBOARD-COLOR1 — palette biểu đồ dùng chung; tách khỏi màu trạng thái semantic. */
    --ui-chart-blue: #2f6fe4;
    --ui-chart-blue-soft: #dce8ff;
    --ui-chart-green: #32a852;
    --ui-chart-green-soft: #ddf4e3;
    --ui-chart-neutral: #d9dee7;
    --ui-chart-neutral-soft: #eef2f7;
    --ui-chart-purple: #6f42c1;
    --ui-chart-purple-soft: #e7ddf8;
    --ui-chart-orange: #e97b2c;
    --ui-chart-orange-soft: #f8e3d2;
    --ui-chart-grid: #e7ecf3;

    --ui-radius-sm: 10px;
    --ui-radius-md: 14px;
    --ui-radius-lg: 18px;
    --ui-radius-xl: 22px;

    --ui-shadow-card: 0 8px 24px rgba(16, 36, 64, .07);
    --ui-shadow-float: 0 18px 48px rgba(16, 36, 64, .15);
    --ui-focus-ring: 0 0 0 4px rgba(37, 99, 235, .16);

    --ui-space-1: 4px;
    --ui-space-2: 8px;
    --ui-space-3: 12px;
    --ui-space-4: 16px;
    --ui-space-5: 20px;
    --ui-space-6: 24px;
    --ui-space-7: 32px;
    --ui-space-8: 40px;

    --ui-control-height: 44px;
    --ui-transition-fast: 150ms ease;
}