/* =========================================================
   VietCHILD — Design tokens (single source of truth)
   Theo STYLE.md — đồng bộ giữa public/css/*.css và view inline.
   Tokens MỚI dùng prefix --brand/--accent/--neutral.
   Tokens CŨ --vs-* được map xuống các giá trị mới trong forms.css
   để giữ compat với CSS module cũ.
   ========================================================= */

:root {
    /* ---------- Brand ---------- */
    --brand-primary:   #1E3F8E;   /* navy đậm — wordmark, CTA, text */
    --brand-secondary: #5FAFE0;   /* sky — accent, focus ring, decorative */
    --brand-deep:      #16307A;   /* hover của CTA chính */
    --brand-soft:      #EAF3FB;   /* tint sky — bg section, card nhẹ */

    /* ---------- Accent ---------- */
    --accent-coral: #FF6B6B;      /* sai / huỷ / cảnh báo */
    --accent-gold:  #F5B83D;      /* đánh giá, mới, marker câu hỏi video */
    --accent-mint:  #10B981;      /* đúng / hoàn thành */

    /* ---------- Neutral ---------- */
    --neutral-0:   #FFFFFF;
    --neutral-50:  #FAFBFC;
    --neutral-100: #F1F4F8;
    --neutral-200: #E2E8F0;
    --neutral-400: #94A3B8;
    --neutral-600: #475569;
    --neutral-900: #0F172A;

    /* ---------- Semantic ---------- */
    --success: #10B981;
    --warning: #F59E0B;
    --danger:  #EF4444;
    --info:    #5FAFE0;

    /* ---------- Typography ---------- */
    --font-display: 'Quicksand', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body:    'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

    /* ---------- Radius ---------- */
    --radius-sm:   8px;    /* input, button */
    --radius-md:   12px;   /* card */
    --radius-lg:   16px;   /* hero card, modal */
    --radius-full: 9999px;

    /* ---------- Shadow ---------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.16);
    --shadow-cta: 0 10px 24px rgba(30, 63, 142, 0.28);   /* navy CTA glow */
    --shadow-focus: 0 0 0 4px rgba(95, 175, 224, 0.28);  /* sky focus ring */

    /* ---------- Spacing scale (4px base) ---------- */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-6:  24px;
    --space-8:  32px;
    --space-12: 48px;
    --space-16: 64px;

    /* ---------- Z-index scale ---------- */
    --z-dropdown:       1000;
    --z-sticky-header:  1020;
    --z-modal-backdrop: 1040;
    --z-modal:          1050;
    --z-popover:        1060;
    --z-toast:          1080;

    /* ---------- Motion ---------- */
    --motion-fast: 150ms;
    --motion-base: 250ms;
    --motion-slow: 400ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
}

/* Reduced motion — tắt animation cho người cần */
@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;
    }
}

/* Tabular nums cho cột số (điểm đánh giá, %, thời lượng) */
.num-tabular,
.score-num,
.timestamp {
    font-variant-numeric: tabular-nums;
}

/* Reset italic — STYLE.md mục 9.4: không dùng italic cho tiếng Việt */
em, i {
    font-style: normal;
    font-weight: 600;
}