/*
Theme Name: Huyền Học Phương Đông
Theme URI: https://tieudao.info
Author: Hồ Danh
Author URI: https://tieudao.info
Description: Giao diện chuyên sâu về Huyền Học (Tử vi, Lịch vạn niên, Phong thủy) với phong cách cao cấp, huyền bí.
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: huyenhoc
Tags: huyen-hoc, dark-mode, light-mode, responsive, astrology, metaphysics
*/

/* 
  Lưu ý: CSS thực tế sẽ được build bởi Tailwind và PostCSS vào file assets/css/main.css 
  File này chỉ chứa thông tin khai báo Theme cho WordPress.
*/

:root {
    /* Fonts */
    --font-title: 'Playfair Display', serif;
    --font-body: 'Arimo', sans-serif;

    /* Colors - Dark Mode (Default) */
    --gold: #c9a84c;
    --gold-rgb: 201 168 76;
    --gold-light: #f0d080;
    --gold-dim: #7a6030;
    --deep: #05080f;
    --navy: #080d1a;
    --text-primary: #f0f0f0;
    --text-secondary: #aaaaaa;
    --text-muted: #666666;
    --card-bg: rgba(255, 255, 255, 0.04);
    --border-color: rgba(201, 168, 76, 0.15);
    --selection-bg: rgba(201, 168, 76, 0.3);
    --divider: rgba(255, 255, 255, 0.05);
    --nebula-a: rgba(201, 168, 76, 0.08);
    --nebula-b: rgba(201, 168, 76, 0.04);
    --input-bg: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] {
    /* Colors - Light Mode (Antique/Parchment) */
    --deep: #f4efe0;
    --navy: #e8e0cc;
    --card-bg: #ffffff;
    --border-color: rgba(107, 78, 6, 0.18);
    --selection-bg: rgba(139, 101, 8, 0.2);
    --gold: #7a5c08;
    --gold-rgb: 122 92 8;
    --gold-light: #9e7510;
    --gold-dim: #5a4406;
    --text-primary: #1c1710;
    --text-secondary: #4a4030;
    --text-muted: #7a6e5c;
    --divider: rgba(107, 78, 6, 0.1);
    --nebula-a: rgba(122, 92, 8, 0.06);
    --nebula-b: rgba(122, 92, 8, 0.03);
    --input-bg: #ede4d1;
}

body {
    background-color: var(--deep);
    color: var(--text-primary);
    font-family: var(--font-body);
    margin: 0;
    padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-title);
    color: var(--gold);
}