/* Design tokens dùng chung cho toàn bộ site (public + /admin/*).
   Chỉ chứa biến CSS - không có rule component (xem style.css).
   3 tầng theme: mặc định (light) -> prefers-color-scheme (system) ->
   [data-theme] (người dùng chọn thủ công, ghi vào localStorage bởi
   theme-toggle.js) - tầng sau luôn thắng tầng trước. */

:root {
    /* Primary/Accent */
    --color-primary-50: #eff6ff;
    --color-primary-100: #dbeafe;
    --color-primary-500: #3b82f6;
    --color-primary-600: #2563eb;
    --color-primary-700: #1d4ed8;
    --color-primary: var(--color-primary-600);
    --gradient-primary: linear-gradient(135deg, #2563eb, #4f46e5);

    /* Background / surface */
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-surface-subtle: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;
    --color-header-bg: #111827;
    --color-ink: #111827;

    /* Text */
    --color-text: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-disabled: #94a3b8;
    --color-text-on-primary: #ffffff;

    /* Trạng thái */
    --color-success-bg: #dcfce7;
    --color-success-text: #166534;
    --color-success-solid: #16a34a;
    --color-warning-bg: #fef3c7;
    --color-warning-text: #92400e;
    --color-warning-solid: #f59e0b;
    --color-error-bg: #fee2e2;
    --color-error-text: #991b1b;
    --color-error-solid: #dc2626;
    --color-error-border: #fecaca;
    --color-info-bg: #dbeafe;
    --color-info-text: #1e40af;
    --color-info-solid: #2563eb;

    /* Typography */
    --font-family-base: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 2.75rem;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.2;
    --lh-normal: 1.5;

    /* Spacing (thang 8px) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 9px;
    --radius-lg: 14px;
    --radius-full: 999px;

    /* Shadow */
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08);
    --shadow-md: 0 5px 20px rgba(15, 23, 42, 0.06);
    --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.1);
}

/* Theo hệ điều hành/trình duyệt - chỉ áp dụng khi người dùng CHƯA chọn
   thủ công (data-theme="light" chặn khối này ngay cả khi OS đang tối). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-primary-50: #0b1a33;
        --color-primary-100: #12274d;
        --color-primary-500: #3b82f6;
        --color-primary-600: #3b82f6;
        --color-primary-700: #60a5fa;
        --gradient-primary: linear-gradient(135deg, #3b82f6, #6366f1);

        --color-bg: #0f172a;
        --color-surface: #1e293b;
        --color-surface-subtle: #273449;
        --color-border: #334155;
        --color-border-strong: #475569;
        --color-header-bg: #0b1220;
        --color-ink: #334155;

        --color-text: #f1f5f9;
        --color-text-secondary: #cbd5e1;
        --color-text-muted: #94a3b8;
        --color-text-disabled: #64748b;
        --color-text-on-primary: #ffffff;

        --color-success-bg: #0f2e1c;
        --color-success-text: #86efac;
        --color-success-solid: #22c55e;
        --color-warning-bg: #3a2408;
        --color-warning-text: #fcd34d;
        --color-warning-solid: #f59e0b;
        --color-error-bg: #3a1212;
        --color-error-text: #fca5a5;
        --color-error-solid: #ef4444;
        --color-error-border: #7f1d1d;
        --color-info-bg: #122a4d;
        --color-info-text: #93c5fd;
        --color-info-solid: #3b82f6;

        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.35);
        --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.5);
    }
}

/* Người dùng chọn thủ công qua nút toggle (thắng cả 2 khối trên). */
:root[data-theme="dark"] {
    --color-primary-50: #0b1a33;
    --color-primary-100: #12274d;
    --color-primary-500: #3b82f6;
    --color-primary-600: #3b82f6;
    --color-primary-700: #60a5fa;
    --gradient-primary: linear-gradient(135deg, #3b82f6, #6366f1);

    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-surface-subtle: #273449;
    --color-border: #334155;
    --color-border-strong: #475569;
    --color-header-bg: #0b1220;
    --color-ink: #334155;

    --color-text: #f1f5f9;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-disabled: #64748b;
    --color-text-on-primary: #ffffff;

    --color-success-bg: #0f2e1c;
    --color-success-text: #86efac;
    --color-success-solid: #22c55e;
    --color-warning-bg: #3a2408;
    --color-warning-text: #fcd34d;
    --color-warning-solid: #f59e0b;
    --color-error-bg: #3a1212;
    --color-error-text: #fca5a5;
    --color-error-solid: #ef4444;
    --color-error-border: #7f1d1d;
    --color-info-bg: #122a4d;
    --color-info-text: #93c5fd;
    --color-info-solid: #3b82f6;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 5px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 50px rgba(0, 0, 0, 0.5);
}