/* ============================================================
   KCN Manager — Design tokens (nguồn chân lý duy nhất)
   Brand Le Mont trích từ lemont.com.vn — xem design-guidelines-lemont-ui-ux.md
   ============================================================ */
:root {
    /* Brand Le Mont */
    --brand-primary: #012a2c;        /* teal đậm — sidebar, heading, PDF header */
    --brand-primary-hover: #0a3d3f;
    --brand-accent: #2f635b;         /* teal logo — buttons, links, active */
    --brand-accent-hover: #254e47;
    --brand-accent-soft: #e8f0ee;    /* nền nhạt: active menu, row hover, table head */
    --brand-muted: #a5a8ab;          /* xám bạc logo — CHỈ border/disabled, KHÔNG dùng cho text */

    /* Text & surface */
    --text: #1f2a29;
    --text-secondary: #55605f;
    --text-invert: #ffffff;
    --bg: #f4f6f6;
    --surface: #ffffff;
    --border: #dbe0e0;

    /* Trạng thái thông báo phí */
    --status-draft: #6b7280;
    --status-approved: #8a6d1a;
    --status-sent: #1d6fb8;
    --status-paid: #1a7f4b;
    --status-overdue: #c0392b;
    --status-cancelled: #9ca3af;
    --warning-bg: #fef3cd;
    --warning-border: #e5c95c;
    --danger-bg: #fdecea;

    /* Scale */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-6: 24px; --space-8: 32px;
    --radius: 6px; --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(1, 42, 44, .08);
    --shadow-md: 0 4px 12px rgba(1, 42, 44, .12);

    /* Typography — system stack: local, tức thì, đủ dấu tiếng Việt (không font CDN) */
    --font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fs-sm: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 24px;

    --sidebar-width: 240px;
}