/* =========================
DARK THEME (Default)
========================= */
:root {
/* Nền đen */
--bg: #0b0b0c;

/* Màu lớp phủ, thẻ card,... */
--surface: rgba(255, 255, 255, 0.04);
/* Màu đường kẻ, khung viền,.. */
--border: rgba(255, 255, 255, 0.08);

/* Màu chữ chính (tiêu đề, nội dung,...) */
--text-main: #f5f5f7;
/* Màu chữ phụ (Mô tả, chú thích,...) */
--text-sub: #8e8e93;

/* Màu (nút bấm, liên kết, active,..) */
--accent: #7c7cff;
}

/* =========================
LIGHT THEME
========================= */
.theme-light {
/* Nền trắng */
--bg: #050a09;

/* Lớp phủ/Card */
--surface: rgba(16, 24, 20, 0.6);
--border: rgba(46, 213, 115, 0.12);

/* Màu chữ chính */
--text-main: #e0f2f1;
/* Màu chữ phụ */
--text-sub: #7a8c8a;

/* Màu tím */
--accent: #7c7cff; 
}

/* =========================
GLOBAL BACKGROUND CONTROL
========================= */
body {
background-color: var(--bg);
transition: background-color 0.3s ease, color 0.3s ease;
}

/* =========================
SUBTLE GLOW
========================= */
.card:hover {
box-shadow:
0 8px 20px rgba(0, 0, 0, 0.25),
0 0 0 1px var(--border);
}

/* =========================
BUTTON ACCENT TOUCH
========================= */
.btn {
color: var(--accent);
}

/* =========================
SELECTION COLOR
========================= */
::selection {
background: var(--accent);
color: #fff;
}

/* =========================
SMOOTH TRANSITIONS
========================= */
* {
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}