/* base.css - CSS重置、基础元素样式和变量定义 */

/* CSS重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* CSS变量定义 */
:root {
    /* 字体族定义 */
    --font-family-body: 'Proxima Nova', 'Metropolis', 'Figtree', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-family-heading: 'Bebas Neue', 'Oswald', 'Antonio', 'Fjalla One', 'Arial Black', 'Helvetica Bold', Impact, sans-serif;
    --font-family-numeric: 'JetBrains Mono', 'JetBrains Mono NL', 'Fira Code', 'Source Code Pro', 'Roboto Mono', 'Courier New', monospace;
    
    /* 备用字体族 */
    --font-family-body-alt: 'Proxima Nova Alt', 'Metropolis', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-family-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-family-mono: 'JetBrains Mono', 'JetBrains Mono NL', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
    
    /* 主色调定义 */
    --color-primary: #f7be00;
    --color-secondary: #eea900;
    --color-success: #28a745;
    --color-danger: #dc3545;
    --color-warning: #ffc107;
    --color-info: #17a2b8;
    --color-light: #f8f9fa;
    --color-dark: #333;
    --color-darker: #232323;
    --color-white: #ffffff;
    --color-black: #000000;
    
    /* 文本颜色 */
    --color-text: #333333;
    --color-text-light: #666666;
    --color-text-muted: #999999;
    --color-heading: #1a1a1a;
    --color-background: #ffffff;
    --color-gray-dark: #474747;
    --color-gray-darker: #282828;
    
    /* 字体大小定义 */
    --font-size-base: 16px;
    --font-size-small: 0.875rem; /* 14px */
    --font-size-large: 1.125rem; /* 18px */
    --font-size-xl: 1.25rem; /* 20px */
    --font-size-xxl: 1.5rem; /* 24px */
    --font-size-h1: 3.75rem; /* 60px */
    --font-size-h2: 2.5rem; /* 40px */
    --font-size-h3: 2rem; /* 32px */
    --font-size-h4: 1.75rem; /* 28px */
    --font-size-h5: 1.5rem; /* 24px */
    --font-size-h6: 1.25rem; /* 20px */
    
    /* 字重定义 */
    --font-weight-thin: 100;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
    
    /* 行高定义 */
    --line-height-base: 1.6;
    --line-height-heading: 1.2;
    --line-height-body: 1.8;
    --line-height-tight: 1.4;
    
    /* 间距定义 */
    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-xxl: 3rem; /* 48px */
    --spacing-xxxl: 4rem; /* 64px */
    
    /* 边框半径定义 */
    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 1rem; /* 16px */
    --border-radius-xl: 1.5rem; /* 24px */
    --border-radius-xxl: 2rem; /* 32px */
    --border-radius-round: 50%;
    
    /* 阴影定义 */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* 过渡效果 */
    --transition-base: all 0.3s ease;
    --transition-fast: all 0.15s ease;
    --transition-slow: all 0.5s ease;
    
    /* Z-index层级 */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-tooltip: 1070;
    
    /* 容器宽度定义 */
    --container-max-width: 1590px;
    --container-padding: 1.25rem; /* 20px */
}

/* 基础元素样式 */
html {
    font-size: var(--font-size-base);
    font-family: var(--font-family-body);
    line-height: var(--line-height-base);
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    color: var(--color-text);
    background-color: var(--color-background);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 菜单打开时禁止页面滚动 */
body.menu-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* 标题基础样式 */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading);
    color: var(--color-heading);
    text-transform: uppercase;
    letter-spacing: 0;
    margin-bottom: var(--spacing-md);
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

/* 段落和文本 */
p {
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-body);
    margin-bottom: var(--spacing-md);
    color: var(--color-text);
}

/* 强调文本 */
em {
    font-style: italic;
    font-weight: var(--font-weight-medium);
}

strong {
    font-weight: var(--font-weight-bold);
}

/* 链接 */
a {
    color: var(--color-primary);
    text-decoration: none;
    transition: var(--transition-base);
}

a:hover {
    color: var(--color-secondary);
}

/* 图片 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 表单元素 */
input, textarea, button, select {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

/* 数值显示基础样式 */
.numeric,
.price,
.counter,
.data-value {
    font-family: var(--font-family-numeric);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0;
}