/*
 * congcuseoai.com — Design tokens (phase 01, 260904)
 *
 * Nguồn sự thật DUY NHẤT cho màu, font, cỡ chữ, spacing, bo góc, bóng đổ, layout — trích từ
 * 24 file thiết kế Claude Design (redesgin/Redesign giao diện congcuseoai/*.dc.html).
 *
 * KHÔNG thêm token mới ở file khác — mọi CSS khác (style.css, css riêng từng trang) chỉ được
 * đọc var(--...) từ đây, không viết cứng hex/px. Nạp file này TRƯỚC style.css ở mọi layout.
 */

/* ── Font tự host (subset latin + vietnamese, tránh phụ thuộc Google Fonts CDN) ────────────── */
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-400-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-400-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-500-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-500-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-600-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-600-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-700-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-700-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-800-vietnamese.woff2') format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/be-vietnam-pro-800-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Thương hiệu */
    --brand: #8A9A5B;
    --brand-dark: #5F6E3C;
    --brand-darker: #3F4A2A;
    --brand-link: #55663A;
    --brand-grad: linear-gradient(135deg, #8A9A5B, #5F6E3C);

    /* Nền */
    --canvas: #FAF9F4;
    --surface: #FFFFFF;
    --surface-alt: #F3F2E9;
    --tint: #EEF2E3;
    --surface-dark: #23261D;

    /* Chữ */
    --ink: #23261D;
    --ink-2: #3A3F2E;
    --ink-3: #4B5240;
    --ink-4: #5D6350;
    --muted: #6B7260;
    --muted-2: #8A9080;
    --faint: #A9AC98;
    --on-dark: #C9CBB8;

    /* Đường kẻ */
    --line: #E6E4D8;
    --line-soft: #EFEEE4;
    --line-softer: #F1F0E6;
    --line-faint: #F5F4EA;
    --line-tint: #C9D3AC;

    /* Trạng thái */
    --ok-bg: #EEF2E3;
    --ok-fg: #3F4A2A;
    --warn-bg: #FBF1DF;
    --warn-fg: #8A6B2E;
    --danger-bg: #FBE9E7;
    --danger-fg: #B23A2E;
    --info-bg: #F1E9E0;
    --info-fg: #8A5A3E;

    /* Font */
    --font: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Cỡ chữ */
    --fs-xs: 11px;
    --fs-sm: 12.5px;
    --fs-base: 14px;
    --fs-md: 14.5px;
    --fs-lg: 15.5px;
    --fs-title: 16.5px;
    --fs-h3: 17px;
    --fs-h2: 24px;
    --fs-h1: 30px;
    --fs-display: 42px;
    --fs-hero: 52px;

    /* Spacing */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-7: 28px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 56px;
    --sp-16: 76px;

    /* Bo góc */
    --r-sm: 8px;
    --r: 10px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* Bóng */
    --sh-btn: 0 8px 20px -6px rgba(138, 154, 91, .55);
    --sh-card: 0 30px 60px -20px rgba(43, 52, 32, .18);
    --sh-menu: 0 8px 20px rgba(0, 0, 0, .08);

    /* Lớp phủ trên nền tối — sidebar admin hover/active (phase 02, app-shell.css) */
    --overlay-on-dark-weak: rgba(255, 255, 255, .06);
    --overlay-on-dark-strong: rgba(255, 255, 255, .1);
    --overlay-on-dark-line: rgba(255, 255, 255, .1);
    --overlay-on-dark-line-strong: rgba(255, 255, 255, .2);
    /* Màn che khi mở sidebar di động (phase 02, app-shell.css) */
    --scrim: rgba(0, 0, 0, .35);

    /* Bố cục */
    --maxw: 1200px;
    --sidebar-w: 240px;
    --sidebar-admin-w: 230px;
    --topbar-h: 64px;
}