/* =====================================================
   天机阁 - 全局基础样式
   色彩体系按规划文档3.2节定义
   ===================================================== */

/* ==================== CSS Reset ==================== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

a {
    text-decoration: none;
    color: inherit;
}

ul, ol {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

input, textarea, select, button {
    font: inherit;
    color: inherit;
}

table {
    border-collapse: collapse;
    width: 100%;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

/* ==================== 色彩变量 (3.2节) ==================== */
:root {
    /* 主色调（暗色基底） */
    --color-bg-main: #1a1a2e;       /* 深夜墨蓝 */
    --color-bg-secondary: #16213e;   /* 靛青深蓝 */
    --color-bg-card: #0f3460;        /* 星空蓝 */

    /* 点缀色（金色系） */
    --color-gold: #d4a574;            /* 古铜金 */
    --color-gold-bright: #e6c785;    /* 明金 */
    --color-gold-dark: #c9a227;      /* 暗金 */

    /* 功能色 */
    --color-danger: #e94560;         /* 朱砂红 */
    --color-success: #4ade80;        /* 翠玉绿 */
    --color-warning: #f59e0b;       /* 琥珀黄 */
    --color-muted: #94a3b8;          /* 雾灰 */

    /* 文字色 */
    --color-text-title: #f0e6d2;     /* 宣纸白 */
    --color-text-body: #d4c4a8;      /* 米黄白 */
    --color-text-dim: #8b8378;       /* 暗灰棕 */

    /* 半透明色 */
    --color-card-bg: rgba(15, 52, 96, 0.6);
    --color-card-border: rgba(201, 162, 39, 0.3);
    --color-input-bg: rgba(0, 0, 0, 0.3);
    --color-input-border: rgba(201, 162, 39, 0.2);

    /* 阴影 */
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-hover: 0 6px 30px rgba(0, 0, 0, 0.4);

    /* 间距 */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;

    /* 圆角 */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* 过渡 */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* 字体 */
    --font-title: "STKaiti", "KaiTi", "楷体", serif;
    --font-body: "STSong", "SimSun", "宋体", serif;
    --font-number: "STZhongsong", "宋体", serif;
}

/* ==================== 字体设置 (3.3节) ==================== */
body {
    font-family: var(--font-body);
    color: var(--color-text-body);
    background-color: var(--color-bg-main);
}

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

/* 数字使用宋体 */
.numeric, .price, .star-rating {
    font-family: var(--font-number);
}

/* ==================== Body背景 ==================== */
body {
    background-color: var(--color-bg-main);
    background-image:
        radial-gradient(ellipse at top, var(--color-bg-secondary) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, var(--color-bg-secondary) 0%, transparent 50%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* ==================== 通用文字颜色 ==================== */
.text-gold { color: var(--color-gold); }
.text-gold-bright { color: var(--color-gold-bright); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-muted { color: var(--color-muted); }
.text-title { color: var(--color-text-title); }
.text-body { color: var(--color-text-body); }
.text-dim { color: var(--color-text-dim); }

/* ==================== 链接样式 ==================== */
a {
    color: var(--color-gold);
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-gold-bright);
}

a:active {
    color: var(--color-gold-dark);
}

/* ==================== 滚动条美化 ==================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gold-dark);
    border-radius: 4px;
    opacity: 0.6;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-gold-dark) var(--color-bg-secondary);
}

/* ==================== 选中文本样式 ==================== */
::selection {
    background: rgba(212, 165, 116, 0.3);
    color: var(--color-text-title);
}

/* ==================== 通用工具类 ==================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.hidden { display: none !important; }
.visible { display: block; }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.pt-sm { padding-top: var(--spacing-sm); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-sm { padding-bottom: var(--spacing-sm); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

/* 清除浮动 */
.clearfix::after {
    content: '';
    display: table;
    clear: both;
}