/*
 * public/assets/css/tokens.css — Nền Design System dùng chung (Task 1).
 *
 * Hai lớp token:
 *   1) PRIMITIVE — bảng màu/spacing/typography thô (không phụ thuộc chủ đề).
 *   2) SEMANTIC  — token theo vai trò (đổi giá trị theo [data-theme]).
 *
 * Tương thích ngược: mọi biến cũ đang dùng trong app.css/admin.css
 * (--c-bg, --c-surface, --c-text, --c-muted, --c-border, --c-primary,
 *  --c-*-bg/-text, --radius*, --gap*, --shadow*, --header-h, --bottomnav-h,
 *  --maxw, --font-sans) được GIỮ NGUYÊN tên và ánh xạ sang token mới, nên
 * CSS hiện tại không vỡ.
 *
 * Nạp file này TRƯỚC app.css/admin.css ở cả hai layout.
 */

:root {
    /* ── PRIMITIVE: màu ──────────────────────────────────────────────── */
    --slate-50:  #f8fafc;
    --slate-100: #f1f5f9;
    --slate-200: #e2e8f0;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;

    --blue-400: #60a5fa;
    --blue-500: #3b82f6;
    --blue-600: #2563eb;
    --blue-700: #1d4ed8;

    --green-100: #dcfce7;
    --green-400: #4ade80;
    --green-600: #16a34a;
    --green-700: #166534;

    --red-100: #fee2e2;
    --red-400: #f87171;
    --red-600: #dc2626;
    --red-700: #991b1b;

    --amber-100: #fef3c7;
    --amber-400: #fbbf24;
    --amber-600: #d97706;
    --amber-700: #92400e;

    --sky-100: #dbeafe;
    --sky-700: #1e40af;

    /* ── PRIMITIVE: thang spacing ────────────────────────────────────── */
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    /* ── PRIMITIVE: thang typography ─────────────────────────────────── */
    --fs-xs:  .75rem;
    --fs-sm:  .875rem;
    --fs-md:  1rem;
    --fs-lg:  1.15rem;
    --fs-xl:  1.4rem;
    --fs-2xl: 1.8rem;
    --fw-normal: 400;
    --fw-medium: 600;
    --fw-bold:   800;
    --lh-tight: 1.25;
    --lh-base:  1.5;

    /* ── PRIMITIVE: radius / shadow / z-index ────────────────────────── */
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-pill: 999px;

    --sh-sm: 0 1px 3px rgba(15, 23, 42, .12);
    --sh-md: 0 8px 24px rgba(15, 23, 42, .18);
    --sh-lg: 0 18px 48px rgba(15, 23, 42, .28);

    --z-header: 20;
    --z-drawer: 100;
    --z-modal:  110;
    --z-toast:  200;

    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* ── SEMANTIC (light mặc định) ───────────────────────────────────── */
    --c-bg:            var(--slate-50);
    --c-surface:       #ffffff;
    --c-surface-2:     var(--slate-100);
    --c-text:          var(--slate-900);
    --c-muted:         var(--slate-500);
    --c-border:        var(--slate-200);
    --c-primary:       var(--blue-600);
    --c-primary-hover: var(--blue-700);
    --c-primary-text:  #ffffff;
    --c-secondary:      var(--slate-200);
    --c-secondary-text: var(--slate-800);

    --c-success-bg:   var(--green-100);
    --c-success-text: var(--green-700);
    --c-error-bg:     var(--red-100);
    --c-error-text:   var(--red-700);
    --c-danger:       var(--red-600);
    --c-danger-text:  #ffffff;
    --c-warning-bg:   var(--amber-100);
    --c-warning-text: var(--amber-700);
    --c-info-bg:      var(--sky-100);
    --c-info-text:    var(--sky-700);

    /* Bí danh tương thích ngược cho code cũ. */
    --radius:     var(--r-md);
    --radius-sm:  var(--r-sm);
    --radius-pill: var(--r-pill);
    --gap:    var(--space-4);
    --gap-sm: var(--space-2);
    --header-h: 56px;
    --bottomnav-h: 60px;
    --maxw: 1100px;
    --shadow-sm: var(--sh-sm);
    --shadow-md: var(--sh-md);
    --shadow-lg: var(--sh-lg);
}

/* ── DARK THEME ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
    --c-bg:            var(--slate-950);
    --c-surface:       var(--slate-900);
    --c-surface-2:     var(--slate-800);
    --c-text:          var(--slate-100);
    --c-muted:         var(--slate-400);
    --c-border:        var(--slate-700);
    --c-primary:       var(--blue-500);
    --c-primary-hover: var(--blue-400);
    --c-primary-text:  #ffffff;
    --c-secondary:      var(--slate-700);
    --c-secondary-text: var(--slate-100);

    --c-success-bg:   rgba(34, 197, 94, .18);
    --c-success-text: var(--green-400);
    --c-error-bg:     rgba(239, 68, 68, .18);
    --c-error-text:   var(--red-400);
    --c-danger:       var(--red-600);
    --c-danger-text:  #ffffff;
    --c-warning-bg:   rgba(245, 158, 11, .18);
    --c-warning-text: var(--amber-400);
    --c-info-bg:      rgba(59, 130, 246, .18);
    --c-info-text:    var(--blue-400);

    --sh-sm: 0 1px 3px rgba(0, 0, 0, .4);
    --sh-md: 0 8px 24px rgba(0, 0, 0, .5);
    --sh-lg: 0 18px 48px rgba(0, 0, 0, .6);
    --shadow-sm: var(--sh-sm);
    --shadow-md: var(--sh-md);
    --shadow-lg: var(--sh-lg);

    color-scheme: dark;
}

/* Tôn trọng tùy chọn hệ điều hành khi người dùng CHƯA chọn chủ đề. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --c-bg:            var(--slate-950);
        --c-surface:       var(--slate-900);
        --c-surface-2:     var(--slate-800);
        --c-text:          var(--slate-100);
        --c-muted:         var(--slate-400);
        --c-border:        var(--slate-700);
        --c-primary:       var(--blue-500);
        --c-primary-hover: var(--blue-400);
        --c-secondary:      var(--slate-700);
        --c-secondary-text: var(--slate-100);
        --c-success-bg:   rgba(34, 197, 94, .18);
        --c-success-text: var(--green-400);
        --c-error-bg:     rgba(239, 68, 68, .18);
        --c-error-text:   var(--red-400);
        --c-warning-bg:   rgba(245, 158, 11, .18);
        --c-warning-text: var(--amber-400);
        --c-info-bg:      rgba(59, 130, 246, .18);
        --c-info-text:    var(--blue-400);
        color-scheme: dark;
    }
}

/* ── Shared component: Toast ─────────────────────────────────────────── */
.toast-region {
    position: fixed;
    left: 50%;
    bottom: calc(var(--bottomnav-h) + var(--space-4));
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: min(92vw, 420px);
    pointer-events: none;
}
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    box-shadow: var(--sh-md);
    background: var(--c-surface);
    color: var(--c-text);
    border-left: 4px solid var(--c-primary);
    font-size: var(--fs-sm);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }
.toast--success { border-left-color: var(--c-success-text); }
.toast--error   { border-left-color: var(--c-error-text); }
.toast--warning { border-left-color: var(--c-warning-text); }
.toast--info    { border-left-color: var(--c-info-text); }
.toast__msg { flex: 1; }
.toast__close {
    background: none; border: 0; cursor: pointer;
    color: var(--c-muted); font-size: 1.1rem; line-height: 1;
    padding: 0;
}

/* ── Shared component: Theme switcher ────────────────────────────────── */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--r-pill);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text);
    cursor: pointer;
}
.theme-toggle:hover { background: var(--c-surface-2); }
.theme-toggle__sun, .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root:not([data-theme="dark"]) .theme-toggle__moon { display: block; }

/* ── Shared component: Skeleton + Empty state ────────────────────────── */
.skeleton {
    display: block;
    background: linear-gradient(90deg, var(--c-surface-2) 25%, var(--c-border) 37%, var(--c-surface-2) 63%);
    background-size: 400% 100%;
    border-radius: var(--r-sm);
    animation: skeleton-shimmer 1.4s ease infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
.empty-state {
    text-align: center;
    color: var(--c-muted);
    padding: var(--space-6) var(--space-4);
}
.empty-state__title { font-weight: var(--fw-medium); color: var(--c-text); margin-bottom: var(--space-1); }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    .toast { transition: none; }
}