/*
 * @Project      家具展示网站与小程序接口预留项目
 * @File         style.css
 * @Description  全局 CSS 变量定义、基础重置、通用工具类与按钮系统。
 *               该文件必须最先引入，为 components.css 和 pages.css 提供变量基础。
 * @Author       易商企
 * @Date         2026
 */

/* ============================================================
 * 一、全局 CSS 变量（Color / Spacing / Radius / Shadow / Font）
 *    遵循设计规范：主色 #FF6600 橙色系列 + 中性色系
 * ============================================================ */
:root {
    /* —— 主色（橙色系）—— */
    --fg-primary: #FF6600;
    --fg-primary-dark: #e55a00;
    --fg-primary-light: #ff8533;
    --fg-primary-pale: #fff0e6;

    /* —— 中性色 —— */
    --fg-dark: #1d1f22;
    --fg-text: #333333;
    --fg-muted: #777777;
    --fg-light: #f5f5f5;
    --fg-bg-cream: #faf8f6;
    --fg-white: #ffffff;
    --fg-border: #e8e8e8;

    /* —— 功能色 —— */
    --fg-sale: #d12727;
    --fg-new: #ecc713;
    --fg-hot: #FF6600;
    --fg-success: #2e7d32;

    /* —— 间距体系（4px 基准）—— */
    --fg-space-xs: 4px;
    --fg-space-sm: 8px;
    --fg-space-md: 16px;
    --fg-space-lg: 24px;
    --fg-space-xl: 32px;
    --fg-space-2xl: 48px;
    --fg-space-3xl: 64px;
    --fg-space-4xl: 80px;

    /* —— 圆角 —— */
    --fg-radius-sm: 4px;
    --fg-radius-md: 8px;
    --fg-radius-lg: 12px;
    --fg-radius-pill: 50px;

    /* —— 阴影 —— */
    --fg-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --fg-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --fg-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* —— 字体 —— */
    --fg-font-family: 'MiSans', -apple-system, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    --fg-font-size-xs: 12px;
    --fg-font-size-sm: 14px;
    --fg-font-size-base: 16px;
    --fg-font-size-lg: 20px;
    --fg-font-size-xl: 24px;
    --fg-font-size-2xl: 32px;
    --fg-font-size-3xl: 40px;
    --fg-font-size-4xl: 56px;

    /* —— 行高 —— */
    --fg-line-height-tight: 1.2;
    --fg-line-height-base: 1.5;
    --fg-line-height-loose: 1.8;

    /* —— 布局 —— */
    --fg-header-height: 64px;
    --fg-max-width: 1280px;
    --fg-content-padding: 0 24px;
}

/* ============================================================
 * 二、CSS Reset（基础重置）
 *    去除浏览器默认间距，统一盒模型
 * ============================================================ */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: var(--fg-font-size-base);
    line-height: var(--fg-line-height-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--fg-font-family);
    color: var(--fg-text);
    background-color: var(--fg-white);
    overflow-x: hidden;
    min-height: 100vh;
}

/* 去除列表默认样式 */
ul, ol {
    list-style: none;
}

/* 链接默认无下划线 */
a {
    color: inherit;
    text-decoration: none;
}

/* 图片块级化，避免底部间隙 */
img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* 按钮基础重置 */
button {
    font-family: inherit;
    font-size: inherit;
    border: none;
    background: none;
    cursor: pointer;
    color: inherit;
}

/* 输入框重置 */
input {
    font-family: inherit;
    font-size: inherit;
    border: none;
    outline: none;
    background: none;
    color: inherit;
}

/* ============================================================
 * 三、通用工具类
 * ============================================================ */

/* 自定义滚动条 — Chrome/Safari/Edge（细窄优雅）*/
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    border: 1px solid transparent;
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Firefox 自定义滚动条 */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
}

/* 容器：居中定宽 */
.fg-container {
    max-width: var(--fg-max-width);
    margin: 0 auto;
    padding: var(--fg-content-padding);
}

/* 宽幅容器：无边距全宽 */
.fg-container-fluid {
    width: 100%;
}

/* 图片占位：保持 1:1 正方形比例 */
.fg-image-square {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: var(--fg-light);
}

/* 弹性布局：水平居中对齐 */
.fg-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 弹性布局：水平两端对齐 */
.fg-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 弹性布局：垂直排列 */
.fg-flex-col {
    display: flex;
    flex-direction: column;
}

/* 文本截断（单行） */
.fg-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 隐藏元素（保留可访问性） */
.fg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* 淡入动画（配合 JS 轮播使用） */
.fg-fade-enter {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.fg-fade-active {
    opacity: 1;
}

/* ============================================================
 * 四、按钮系统
 *    主按钮（橙色实心渐变） / 描边按钮 / 文字按钮
 * ============================================================ */

/* 按钮基础类 */
.fg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--fg-space-sm);
    padding: 12px 28px;
    font-size: var(--fg-font-size-sm);
    font-weight: 600;
    line-height: 1;
    border-radius: var(--fg-radius-pill);
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

/* 主按钮：橙色渐变实心 */
.fg-btn-primary {
    background: linear-gradient(135deg, var(--fg-primary), var(--fg-primary-dark));
    color: var(--fg-white);
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.3);
}
.fg-btn-primary:hover {
    background: linear-gradient(135deg, var(--fg-primary-dark), #cc4f00);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 102, 0, 0.4);
}

/* 描边按钮：透明底 + 边框 */
.fg-btn-outline {
    background: transparent;
    color: var(--fg-primary);
    border: 2px solid var(--fg-primary);
}
.fg-btn-outline:hover {
    background: var(--fg-primary);
    color: var(--fg-white);
    transform: translateY(-2px);
    box-shadow: var(--fg-shadow-md);
}

/* 小号按钮 */
.fg-btn-sm {
    padding: 8px 20px;
    font-size: var(--fg-font-size-xs);
}

/* 大号按钮 */
.fg-btn-lg {
    padding: 16px 36px;
    font-size: var(--fg-font-size-base);
}

/* 禁用状态 */
.fg-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}