/* =============================================================================
 * FILE: variables.css
 * TÊN TIẾNG VIỆT: Biến thiết kế dùng chung toàn hệ thống
 *
 * MỤC ĐÍCH:
 * - Là nguồn duy nhất quản lý màu sắc, khoảng cách, bo góc, bóng, chuyển động và z-index.
 * - Giữ đầy đủ alias cũ để các app hiện tại tiếp tục hoạt động.
 * - Các file CSS khác chỉ sử dụng var(...), không khai báo lại :root.
 * ============================================================================= */

:root {
    /* THƯƠNG HIỆU */
    --navy: #233b5d;
    --navy-2: #2d4665;
    --navy-3: #1d314b;
    --navy-soft: #e8eef6;
    --navy-glass: rgba(35, 59, 93, .12);

    --primary: #233b5d;
    --primary-hover: #1d314b;
    --primary-dark: #1d314b;
    --primary-soft: #e8eef6;
    --primary-light: #e8eef6;
    --primary-rgb: 35, 59, 93;

    /* TRẠNG THÁI */
    --success: #16a34a;
    --success-hover: #15803d;
    --success-dark: #15803d;
    --success-soft: #dcfce7;
    --success-light: #dcfce7;
    --success-rgb: 22, 163, 74;

    --info: #0284c7;
    --info-hover: #0369a1;
    --info-dark: #0369a1;
    --info-soft: #e0f2fe;
    --info-light: #e0f2fe;
    --info-rgb: 2, 132, 199;

    --warning: #f59e0b;
    --warning-hover: #d97706;
    --warning-dark: #d97706;
    --warning-soft: #fef3c7;
    --warning-light: #fef3c7;
    --warning-rgb: 245, 158, 11;

    --danger: #dc2626;
    --danger-hover: #b91c1c;
    --danger-dark: #b91c1c;
    --danger-soft: #fee2e2;
    --danger-light: #fee2e2;
    --danger-rgb: 220, 38, 38;

    --neutral: #64748b;
    --neutral-dark: #475569;
    --neutral-soft: #f1f5f9;

    /* BỀ MẶT */
    --surface-page: #f4f7fb;
    --surface-card: #ffffff;
    --surface-panel: #f8fafc;
    --surface-hover: #f1f5f9;
    --surface-disabled: #e2e8f0;
    --surface-overlay: rgba(15, 23, 42, .46);

    /* Alias tương thích */
    --bg: var(--surface-page);
    --bg-main: var(--surface-page);
    --bg-white: var(--surface-card);
    --white: #ffffff;
    --card: var(--surface-card);

    /* CHỮ */
    --text-primary: #233b5d;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-disabled: #94a3b8;
    --text-on-primary: #ffffff;

    /* Alias tương thích */
    --text: var(--text-primary);
    --text-main: var(--text-primary);
    --muted: var(--text-muted);
    --text-light: var(--text-secondary);
    --text-white: var(--text-on-primary);

    /* VIỀN */
    --border-default: rgba(35, 59, 93, .14);
    --border-strong: rgba(35, 59, 93, .24);
    --border-soft: rgba(35, 59, 93, .08);
    --border-on-dark: rgba(255, 255, 255, .22);
    --divider: rgba(35, 59, 93, .10);

    /* Alias tương thích */
    --border: var(--border-default);
    --border-color: var(--border-default);
    --border-light: rgba(255, 255, 255, .66);

    /* KÍNH */
    --glass-bg: rgba(255, 255, 255, .68);
    --glass-bg-strong: rgba(255, 255, 255, .82);
    --glass-border: rgba(255, 255, 255, .62);
    --glass-navy: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06)), linear-gradient(180deg, #2d4665 0%, #233b5d 52%, #1d314b 100%);
    --glass-white: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.54));

    /* FONT */
    --font-sans: "Segoe UI", Inter, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 18px;
    --font-size-2xl: 22px;
    --font-size-3xl: 28px;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;

    /* KHOẢNG CÁCH */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;

    /* KÍCH THƯỚC TƯƠNG TÁC */
    --control-height-sm: 36px;
    --control-height: 44px;
    --control-height-lg: 50px;
    --touch-target: 44px;

    /* SIDEBAR */
    --sidebar-width: 270px;
    --sidebar-collapsed-width: 86px;

    /* BO GÓC */
    --radius-xs: 8px;
    --radius-sm: 14px;
    --radius-md: 18px;
    --radius-lg: 22px;
    --radius-xl: 26px;
    --radius-2xl: 30px;
    --radius-pill: 999px;
    --radius: var(--radius-lg);

    /* BÓNG */
    --shadow-xs: 0 4px 12px rgba(35, 59, 93, .05);
    --shadow-sm: 0 8px 24px rgba(35, 59, 93, .07);
    --shadow-md: 0 14px 34px rgba(35, 59, 93, .09);
    --shadow-lg: 0 22px 58px rgba(35, 59, 93, .12);
    --shadow-xl: 0 34px 90px rgba(15, 23, 42, .28);
    --shadow-soft: 0 18px 45px rgba(35, 59, 93, .10);
    --shadow-card: 0 12px 32px rgba(35, 59, 93, .08);

    /* FOCUS */
    --focus-ring: 0 0 0 4px rgba(35, 59, 93, .14);
    --focus-ring-danger: 0 0 0 4px rgba(220, 38, 38, .14);

    /* CHUYỂN ĐỘNG */
    --transition-fast: .18s ease;
    --transition-normal: .24s ease;
    --transition-slow: .32s ease;

    /* Z-INDEX */
    --z-base: 1;
    --z-sticky: 100;
    --z-topbar: 900;
    --z-overlay: 1100;
    --z-sidebar: 1200;
    --z-dropdown: 3000;
    --z-modal: 1055;
    --z-toast: 60000;

    /* Bootstrap đồng bộ với QP Design System */
    --bs-primary: var(--primary);
    --bs-primary-rgb: var(--primary-rgb);
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-info: var(--info);
    --bs-info-rgb: var(--info-rgb);
    --bs-warning: var(--warning);
    --bs-warning-rgb: var(--warning-rgb);
    --bs-danger: var(--danger);
    --bs-danger-rgb: var(--danger-rgb);
    --bs-body-color: var(--text-primary);

    /* =========================================================
       BUTTON COMPATIBILITY TOKENS — Cụm 1.2
       Giữ tương thích với CSS cũ nhưng trỏ về Design Token chuẩn.
    ========================================================= */
    --btn-primary: var(--primary);
    --btn-primary-2: #2d4665;
    --btn-primary-dark: var(--primary-dark);

    --btn-success: var(--success);
    --btn-success-dark: var(--success-dark);

    --btn-info: var(--info);
    --btn-info-dark: var(--info-dark);

    --btn-warning: var(--warning);
    --btn-warning-dark: var(--warning-dark);

    --btn-danger: var(--danger);
    --btn-danger-dark: var(--danger-dark);
    --bs-body-bg: var(--surface-page);
    --bs-border-color: var(--border-default);
}