:root,
[data-bs-theme=light] {

    --nxn-bg: 255, 255, 255;
    --nxn-bg-text: 31, 35, 40;
    --nxn-bg-text-sub: 107, 114, 128;
    --nxn-bg-shadow: 0, 0, 0;
    --nxn-primary: 210, 100%;
    --nxn-primary-text: hsl(var(--nxn-primary), 45%);
    --nxn-primary-background: hsla(var(--nxn-primary), 96%, 1);
    --nxn-secondary: 215, 15%;
    --nxn-secondary-text: hsl(var(--nxn-secondary), 45%);
    --nxn-secondary-background: hsla(var(--nxn-secondary), 96%, 1);

    --nxn-black: 255, 255%;
    --nxn-white: 0, 0%;

    --nxn-green: 144, 72%;
    --nxn-green-text: hsl(var(--nxn-green), 45%);
    --nxn-green-background: hsla(var(--nxn-green), 42.5%, 1);
    --nxn-red: 355, 98%;
    --nxn-red-text: hsl(var(--nxn-red), 45%);
    --nxn-red-background: hsla(var(--nxn-red), 47.5%, 1);
    --nxn-yellow: 48, 100%;
    --nxn-yellow-text: hsl(var(--nxn-yellow), 45%);
    --nxn-yellow-background: hsla(var(--nxn-yellow), 52.5%, 1);
    --nxn-blue: 210, 100%;
    --nxn-blue-text: hsl(var(--nxn-blue), 45%);
    --nxn-blue-background: hsla(var(--nxn-blue), 96%, 1);
    --nxn-grey: 215, 15%;
    --nxn-grey-text: hsl(var(--nxn-grey), 45%);
    --nxn-grey-background: hsla(var(--nxn-grey), 42.5%, 1);

    --nxn-radius-primary: 12px;
    --nxn-radius-secondary: 6px;

    --nxn-fs-primary: 13.5px;

    --nxn-font-primary: system-ui, Arial, Helvetica, sans-serif;

    --z-base: 0; /* Nội dung mặc định, không chồng lấn */
    --z-content: 10; /* Nội dung chính, như section, article */

    --z-sticky: 100; /* Thanh điều hướng cố định (sticky header) */
    --z-fixed: 200; /* Thanh điều hướng cố định hoàn toàn (fixed header/footer) */

    --z-dropdown: 1000; /* Menu dropdown */
    --z-tooltip: 1100; /* Tooltip, hover card */
    --z-popup: 1200; /* Popup nhỏ, như thông báo ngắn */

    --z-modal: 2000; /* Modal, dialog */
    --z-overlay: 1900; /* Lớp phủ nền (backdrop) của modal */

    --z-toast: 3000; /* Thông báo toast, snackbar */
    --z-loading: 4000; /* Thanh loading, spinner */
    --z-max: 9999; /* Mức tối đa, dùng cho các trường hợp đặc biệt */
}

[data-bs-theme=dark] {
    color-scheme: dark;

    --nxn-bg: 15, 18, 20;
    --nxn-bg-text: 249, 250, 251;
    --nxn-bg-text-sub: 156, 163, 175;
    --nxn-bg-shadow: 249, 250, 251;
    --nxn-primary-text: hsl(var(--nxn-primary), 65%);
    --nxn-primary-background: hsla(var(--nxn-primary), 23%, 0.4);
    --nxn-secondary-text: hsl(var(--nxn-secondary), 45%);
    --nxn-secondary-background: hsla(var(--nxn-secondary), 23%, 0.4);
    --nxn-green-text: hsl(var(--nxn-green), 40%);
    --nxn-red-text: hsl(var(--nxn-red), 60%);
    --nxn-yellow-text: hsl(var(--nxn-yellow), 40%);
    --nxn-blue-text: hsl(var(--nxn-blue), 65%);
    --nxn-blue-background: hsla(var(--nxn-blue), 23%, 0.4);
    --nxn-grey-text: hsl(var(--nxn-grey), 60%);

}