/* =====================================================================
   KRENDE UI — TOKEN THIẾT KẾ
   Phong cách đơn giản kiểu YouTube / Facebook: nền trung tính đen–trắng, chữ rõ,
   nút chính đơn sắc. Mặc định TỐI; <html data-theme="light"> để chuyển sáng.
   Mọi màu/khoảng cách trong web lấy từ đây — muốn đổi giao diện chỉ sửa file này.
   ===================================================================== */

:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    /* Nền & bề mặt */
    --bg:            #0f0f0f;   /* nền trang */
    --surface:       #181818;   /* thẻ, khung nội dung */
    --surface-2:     #272727;   /* chip, nút phụ, ô nhập */
    --surface-hover: #3a3a3a;
    --surface-press: #4a4a4a;
    --overlay:       rgba(0, 0, 0, .6);
    --border:        #303030;
    --border-strong: #3f3f3f;

    /* Chữ */
    --text:        #f1f1f1;
    --text-2:      #aaaaaa;
    --text-3:      #717171;
    --text-invert: #0f0f0f;

    /* Nút chính: đơn sắc (trắng trên nền tối) */
    --primary:       #f1f1f1;
    --primary-hover: #d9d9d9;
    --on-primary:    #0f0f0f;

    /* Màu chức năng */
    --link:     #3ea6ff;
    --info:     #3ea6ff;
    --success:  #2ba640;
    --warning:  #f5a524;
    --danger:   #ff4e45;
    --badge:    #cc0000;   /* chấm đỏ số thông báo */
    --info-bg:    rgba(62, 166, 255, .14);
    --success-bg: rgba(43, 166, 64, .16);
    --warning-bg: rgba(245, 165, 36, .16);
    --danger-bg:  rgba(255, 78, 69, .16);

    --shadow-pop: 0 4px 32px rgba(0, 0, 0, .55);
    --skeleton:   #272727;
    --skeleton-hi:#323232;
}

:root[data-theme="light"] {
    color-scheme: light;

    --bg:            #ffffff;
    --surface:       #ffffff;
    --surface-2:     #f2f2f2;
    --surface-hover: #e5e5e5;
    --surface-press: #d9d9d9;
    --overlay:       rgba(0, 0, 0, .4);
    --border:        #e5e5e5;
    --border-strong: #d3d3d3;

    --text:        #0f0f0f;
    --text-2:      #606060;
    --text-3:      #909090;
    --text-invert: #ffffff;

    --primary:       #0f0f0f;
    --primary-hover: #272727;
    --on-primary:    #ffffff;

    --link:     #065fd4;
    --info:     #065fd4;
    --success:  #107c10;
    --warning:  #b26a00;
    --danger:   #cc0000;
    --badge:    #cc0000;
    --info-bg:    #def1ff;
    --success-bg: #e3f5e3;
    --warning-bg: #fff3dc;
    --danger-bg:  #ffe5e5;

    --shadow-pop: 0 4px 32px rgba(0, 0, 0, .12);
    --skeleton:   #f2f2f2;
    --skeleton-hi:#e8e8e8;
}

:root {
    /* Chữ: Roboto (giống YouTube, hỗ trợ đủ dấu tiếng Việt) + font hệ thống dự phòng */
    --font: "Roboto", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "Roboto Mono", ui-monospace, Consolas, monospace;

    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;   /* cỡ chữ cơ bản */
    --fs-lg: 16px;
    --fs-xl: 20px;
    --fs-2xl: 24px;
    --fs-3xl: 32px;

    /* Khoảng cách (bội số 4px) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

    /* Bo góc vừa phải */
    --r-sm: 8px;      /* ô nhập, chip */
    --r-md: 12px;     /* thẻ, ảnh */
    --r-lg: 16px;     /* hộp thoại */
    --r-pill: 999px;  /* nút, ô tìm kiếm */

    /* Khung trang */
    --topbar-h: 56px;
    --drawer-w: 240px;
    --bottomnav-h: 56px;
    --content-max: 1280px;
}