/**
 * CMS DESIGN TOKENS — nguồn sự thật DUY NHẤT về màu/nhịp của plugin.
 *
 * Quy tắc (docs/UI-UX-AUDIT.md, được chủ dự án duyệt 2026-08-16):
 *  - Màu thương hiệu: #1245a6. KHÔNG hard-code hex mới trong view — dùng var(--cms-*).
 *  - Admin: KẾ THỪA giao diện WordPress admin, chỉ áp tông chủ đạo làm accent.
 *  - Frontend: NHƯỜNG theme Astra khi theme có biến (--ast-global-color-*),
 *    thương hiệu là fallback — đổi màu theme thì plugin đổi theo.
 *  - File này phải RẤT nhỏ và không có selector trang trí — chỉ biến + chuẩn hoá gốc.
 */

:root {
    /* ===== Màu thương hiệu #1245a6 + thang sinh từ nó ===== */
    --cms-primary:       #1245a6;
    --cms-primary-dark:  #0d3378;   /* hover / active */
    --cms-primary-light: #3a66b8;   /* viền focus, icon phụ */
    --cms-primary-soft:  #e8eef7;   /* nền hàng hover, badge nhạt */

    /* ===== Frontend: ưu tiên biến của Astra, thương hiệu là fallback ===== */
    --cms-fe-primary:      var(--ast-global-color-0, var(--cms-primary));
    --cms-fe-primary-dark: var(--ast-global-color-1, var(--cms-primary-dark));
    --cms-fe-text:         var(--ast-global-color-3, #1f2937);
    --cms-fe-text-soft:    var(--ast-global-color-2, #4b5563);

    /* ===== MỘT thang xám duy nhất (thay cho ~30 tông đang trộn) ===== */
    --cms-gray-50:  #f8fafc;
    --cms-gray-100: #f1f5f9;
    --cms-gray-200: #e2e8f0;
    --cms-gray-300: #cbd5e1;
    --cms-gray-500: #64748b;
    --cms-gray-700: #334155;
    --cms-gray-900: #0f172a;

    /* ===== Màu ngữ nghĩa (trạng thái) ===== */
    --cms-success:      #15803d;
    --cms-success-soft: #dcfce7;
    --cms-warning:      #b45309;
    --cms-warning-soft: #fef3c7;
    --cms-danger:       #b91c1c;
    --cms-danger-soft:  #fee2e2;
    --cms-info:         #0369a1;
    --cms-info-soft:    #e0f2fe;
    --cms-success-dark: #116534;   /* hover của success */
    --cms-warning-dark: #92400e;
    --cms-danger-dark:  #991b1b;
    --cms-info-dark:    #075985;

    /* ===== Nhịp — chấm dứt radius 3/4/6/8/10 và shadow mỗi nơi một kiểu ===== */
    --cms-radius:    8px;
    --cms-radius-sm: 6px;
    --cms-shadow:    0 1px 3px rgba(15, 23, 42, .08);
    --cms-shadow-lg: 0 8px 24px rgba(15, 23, 42, .12);
    --cms-space-1: 4px;
    --cms-space-2: 8px;
    --cms-space-3: 12px;
    --cms-space-4: 16px;
    --cms-space-6: 24px;
    --cms-space-8: 32px;

    /* Chữ: KHÔNG plugin ép font — admin theo WP admin, frontend theo Astra */
    --cms-font: inherit;
}