/* ============================================================
 * assets/css/s68-tokens.css
 *
 * Bộ design token chung cho phía khách hàng (client + Mua nhanh).
 * Nạp SAU các CSS legacy (backend.css, client-sidebar.css, client-topnav.css,
 * quick-buy-modern.css) để ánh xạ biến cũ về token mới.
 *
 * Quy ước màu:
 *  - --s68-brand (#ee4d2d) chỉ dùng cho nền lớn, viền, icon.
 *  - Chữ nhỏ / nút có chữ trắng dùng --s68-brand-strong (#c63d1e):
 *    trắng trên nền này 5.14:1, chữ này trên #f5f5f5 4.71:1 (đạt WCAG AA).
 * ============================================================ */

:root {
    /* Font — Be Vietnam Pro có đủ ký tự tiếng Việt (DM Sans thì không) */
    --s68-font: "Be Vietnam Pro", "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --s68-font-mono: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    /* Thang chữ */
    --s68-text-xs: 0.75rem;    /* 12px */
    --s68-text-sm: 0.8125rem;  /* 13px */
    --s68-text-base: 0.9375rem;/* 15px */
    --s68-text-md: 1.0625rem;  /* 17px */
    --s68-text-lg: 1.25rem;    /* 20px */
    --s68-text-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    --s68-leading: 1.55;
    --s68-leading-tight: 1.25;

    /* Thương hiệu */
    --s68-brand: #ee4d2d;
    --s68-brand-strong: #c63d1e;
    --s68-brand-stronger: #a93318;
    --s68-brand-soft: #fff1ed;
    --s68-on-brand: #ffffff;

    /* Trung tính */
    --s68-bg: #f5f6f8;
    --s68-surface: #ffffff;
    --s68-surface-2: #fafbfc;
    --s68-border: #e4e7ec;
    --s68-border-strong: #d0d5dd;
    --s68-text: #182230;
    --s68-text-soft: #475569;
    --s68-text-mute: #64748b;  /* 4.76:1 trên trắng — thay #94a3b8 (2.56:1) */

    /* Trạng thái (chữ / nền) — đều >= 5:1 */
    --s68-success: #067647;
    --s68-success-bg: #ecfdf3;
    --s68-warning: #934f00;
    --s68-warning-bg: #fffaeb;
    --s68-danger: #b42318;
    --s68-danger-bg: #fef3f2;
    --s68-info: #175cd3;
    --s68-info-bg: #eff8ff;
    --s68-telegram: #0088cc;
    --s68-focus: #2563eb;

    /* Khoảng cách (bội số 4) */
    --s68-space-1: 4px;
    --s68-space-2: 8px;
    --s68-space-3: 12px;
    --s68-space-4: 16px;
    --s68-space-5: 24px;
    --s68-space-6: 32px;
    --s68-space-7: 48px;
    --s68-tap: 44px;

    /* Bo góc / đổ bóng / chuyển động */
    --s68-radius-sm: 6px;
    --s68-radius: 10px;
    --s68-radius-lg: 14px;
    --s68-radius-pill: 999px;
    --s68-shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --s68-shadow-2: 0 4px 12px rgba(16, 24, 40, 0.08);
    --s68-shadow-3: 0 12px 32px rgba(16, 24, 40, 0.12);
    --s68-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --s68-dur-fast: 120ms;
    --s68-dur: 200ms;

    /* Ánh xạ biến cũ → token mới (CSS hiện có vẫn chạy) */
    --cs-text-mute: var(--s68-text-mute);
    --sh-muted-2: var(--s68-text-mute);
    --qb-primary: var(--s68-brand-strong);
    --qb-primary-dark: var(--s68-brand-stronger);
    --qb-subtle: var(--s68-text-mute);
}

/* ---------- Font ---------- */
body.cs-body,
body.qb-body {
    font-family: var(--s68-font);
}

/* ---------- Tương phản: chữ đỏ nhỏ ---------- */
body.cs-body .csd-sec-link,
body.cs-body .cs-footer-meta b {
    color: var(--s68-brand-strong);
}
body.cs-body .csd-sec-link:hover {
    color: var(--s68-brand-stronger);
}
body.cs-body .csd-promo-discount {
    background: var(--s68-brand-strong);
}
body.cs-body .btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--s68-brand-strong);
    border-color: var(--s68-brand-strong);
}
body.cs-body .btn-primary:not(:disabled):not(.disabled):hover {
    background-color: var(--s68-brand-stronger);
    border-color: var(--s68-brand-stronger);
}

/* ---------- Vùng chạm >= 44px ---------- */
body.cs-body .csd-sec-link,
body.cs-body .cs-footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: var(--s68-tap);
}
body.cs-body .cs-footer-social a {
    width: var(--s68-tap);
    height: var(--s68-tap);
}
@media (max-width: 991.98px) {
    body.cs-body .cs-hamburger,
    body.cs-body .cs-topbar-icon {
        min-width: 40px;
        min-height: 40px;
    }
}

/* ---------- Trang Mua nhanh (common/quick-buy.php) ---------- */
body.qb-body {
    /* Biến nội tuyến của trang: #e95420 chỉ đạt ~3.6:1 với chữ trắng */
    --primary: var(--s68-brand-strong);
    --primary-dark: var(--s68-brand-stronger);
    --muted: var(--s68-text-mute);
}
@media (max-width: 575.98px) {
    body.qb-body .btn,
    body.qb-body .btn-compact,
    body.qb-body .btn-apk,
    body.qb-body .queue-tab,
    body.qb-body .queue-page-actions .btn,
    body.qb-body .queue-tools > .btn {
        min-height: var(--s68-tap);
    }
    body.qb-body .copy {
        width: 40px;
        height: 40px;
    }
    body.qb-body .peek {
        width: 40px;
        height: 40px;
    }
}

/* ---------- Thanh điều hướng dưới (mobile) ----------
 * Chia cột theo số mục thực tế để không mục nào rớt khỏi thanh. */
@media (max-width: 991.98px) {
    body.cs-body .cs-bottom-nav {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }
    body.cs-body .cs-bottom-nav a {
        font-size: 11px;
        text-align: center;
    }
    body.cs-body .cs-bottom-nav a i {
        font-size: 19px;
    }
}

/* ---------- Focus nhìn thấy được ---------- */
body.cs-body :is(a, button, .btn, input, select, textarea, [tabindex]):focus-visible,
body.qb-body :is(a, button, .btn, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid var(--s68-focus);
    outline-offset: 2px;
}

/* ---------- Giảm chuyển động ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}