/* ══════════════════════════════════════════════════════════════════════
   tokens.css — Design System v2.0 · Refresh
   Được load trước tất cả module khác (xem admin.style.css @import order).
   Không viết rule CSS ở đây — chỉ @font-face + :root variables.

   Giữ tên biến y hệt phiên bản cũ để backward-compat với mọi module.
   Chỉ REFINE giá trị: OKLCH, cân bằng lightness, thêm ink scale/motion/viz.
══════════════════════════════════════════════════════════════════════ */

/* ── Fonts — Google Sans self-host (latin + vietnamese subset) ────── */
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../../fonts/google-sans/google-sans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Google Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../../fonts/google-sans/google-sans-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;
}

:root {
    /* ── Brand / Primary ──────────────────────────────────────────── */
    --c-primary:          oklch(58% 0.18 258);            /* #2f6bff refined */
    --c-primary-hover:    oklch(52% 0.19 258);
    --c-primary-soft:     oklch(96% 0.025 258);
    --c-primary-soft-text:oklch(38% 0.09 258);
    --c-primary-ink:      oklch(38% 0.09 258);

    /* Accent teal — optional, cho stat cards phụ */
    --c-accent:           oklch(68% 0.16 170);
    --c-accent-soft:      oklch(96% 0.03 170);

    /* ── Status ───────────────────────────────────────────────────── */
    --c-success:          oklch(62% 0.14 155);
    --c-success-hover:    oklch(56% 0.14 155);
    --c-success-soft:     oklch(96% 0.03 155);
    --c-success-text:     oklch(50% 0.14 155);

    --c-danger:           oklch(60% 0.19 22);
    --c-danger-hover:     oklch(54% 0.19 22);
    --c-danger-soft:      oklch(96% 0.03 22);
    --c-danger-soft-text: oklch(50% 0.19 22);
    --c-danger-border:    oklch(82% 0.09 22);

    --c-warning:          oklch(72% 0.15 75);
    --c-warning-soft:     oklch(96% 0.04 80);
    --c-warning-text:     oklch(45% 0.15 70);
    --c-warning-border:   oklch(82% 0.11 75);

    --c-info:             oklch(66% 0.12 220);
    --c-info-soft:        oklch(96% 0.025 220);

    /* ── Neutrals / Dark / Ink ────────────────────────────────────── */
    --c-dark:             oklch(25% 0.02 258);
    --c-text:             oklch(22% 0.02 258);           /* heading */
    --c-text-body:        oklch(32% 0.02 258);           /* body */
    --c-text-muted:       oklch(46% 0.015 258);          /* subtle */
    --c-text-sub:         oklch(62% 0.012 258);          /* muted / placeholder */
    --c-white:            #ffffff;

    /* 5-step ink scale alias (cho code mới) */
    --c-ink-1: var(--c-text);
    --c-ink-2: var(--c-text-body);
    --c-ink-3: var(--c-text-muted);
    --c-ink-4: var(--c-text-sub);
    --c-ink-5: oklch(78% 0.008 258);

    /* ── Backgrounds / Surfaces ───────────────────────────────────── */
    --c-bg-page:          oklch(98.5% 0.005 258);
    --c-bg-soft:          oklch(97% 0.008 258);
    --c-bg-ghost:         oklch(97% 0.005 258);
    --c-bg-light:         oklch(98% 0.005 258);

    --c-surface:          #ffffff;
    --c-surface-soft:     oklch(97% 0.008 258);
    --c-surface-hover:    oklch(96% 0.01 258);

    /* ── Borders ──────────────────────────────────────────────────── */
    --c-border:           oklch(92% 0.008 258);
    --c-border-light:     oklch(95% 0.006 258);
    --c-border-strong:    oklch(88% 0.01 258);

    /* ── Platform ─────────────────────────────────────────────────── */
    --c-facebook:         #1877f2;
    --c-tiktok:           #1d1f26;
    --c-shopee:           #ee4d2d;               /* was #f86a35 — updated to 2025 brand guide */
    --c-instagram:        #e1306c;
    --c-lazada:           #fe2769;
    --c-bank:             #5d78ff;
    --c-kiotviet:         #0b86f7;

    /* ── Sidebar ──────────────────────────────────────────────────── */
    --c-sidebar-bg:       oklch(22% 0.02 258);
    --c-sidebar-sub:      oklch(18% 0.02 258);

    /* ── Data Viz (6 categorical, đồng L/C) ───────────────────────── */
    --viz-1: oklch(64% 0.14 258);                /* Blue */
    --viz-2: oklch(66% 0.14 170);                /* Teal */
    --viz-3: oklch(70% 0.14 60);                 /* Yellow-orange */
    --viz-4: oklch(62% 0.16 20);                 /* Red-orange */
    --viz-5: oklch(66% 0.14 310);                /* Purple */
    --viz-6: oklch(68% 0.14 130);                /* Green */

    /* ── Spacing — 4px grid ───────────────────────────────────────── */
    --gap-xs:  8px;
    --gap-sm:  12px;
    --gap-md:  16px;
    --gap-lg:  20px;
    --gap-xl:  24px;

    /* Extended scale (cho code mới) */
    --s-1:  4px;   --s-2:  8px;   --s-3:  12px;  --s-4:  16px;
    --s-5:  20px;  --s-6:  24px;  --s-7:  32px;  --s-8:  40px;
    --s-9:  56px;  --s-10: 72px;

    /* ── Border Radius ────────────────────────────────────────────── */
    --r-xs:    6px;
    --r-sm:    8px;
    --r-md:    10px;                            /* was 12 — tightened */
    --r-lg:    14px;                            /* was 16 */
    --r-xl:    18px;                            /* was 20 */
    --r-2xl:   24px;
    --r-pill:  999px;

    /* ── Shadows ──────────────────────────────────────────────────── */
    --shadow-xs:   0 1px 2px rgba(23, 30, 50, 0.04);
    --shadow-sm:   0 2px 4px rgba(23, 30, 50, 0.05), 0 1px 2px rgba(23, 30, 50, 0.03);
    --shadow-md:   0 4px 12px rgba(23, 30, 50, 0.06), 0 2px 4px rgba(23, 30, 50, 0.03);
    --shadow-lg:   0 12px 28px rgba(23, 30, 50, 0.08), 0 4px 8px rgba(23, 30, 50, 0.04);

    /* Legacy alias (giữ backward-compat) */
    --shadow-card:    var(--shadow-sm);
    --shadow-card-sm: var(--shadow-xs);
    --shadow-btn:     var(--shadow-md);
    --shadow-primary: 0 4px 14px oklch(58% 0.18 258 / 0.24);

    /* ── Typography ───────────────────────────────────────────────── */
    --ff-body: "Google Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ff-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Consolas", "Menlo", "Liberation Mono", monospace;

    --font-2xs:  10px;
    --font-xs:   11px;
    --font-sm:   12px;
    --font-base: 13px;                          /* was 14 — dense hơn cho admin */
    --font-md:   15px;
    --font-lg:   18px;                          /* was 16 */
    --font-xl:   20px;
    --font-2xl:  24px;
    --font-3xl:  28px;
    --font-4xl:  36px;                          /* was 32 */

    /* ── Button heights ───────────────────────────────────────────── */
    --btn-h-sm:  32px;                          /* was 34 */
    --btn-h-md:  42px;
    --btn-h-lg:  48px;                          /* was 46 */

    /* ── Motion ───────────────────────────────────────────────────── */
    --ease-out:    cubic-bezier(.22, 1, .36, 1);
    --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-std:    cubic-bezier(.4, 0, .2, 1);
    --dur-fast:    120ms;
    --dur-base:    200ms;
    --dur-slow:    320ms;

    /* ── Transitions (legacy alias — giữ backward-compat) ─────────── */
    --transition-btn: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
    --transition-fast: all .15s ease;
}