/* =========================================================
   蓝光眼镜 — 全局设计变量 (蓝色系主题)
   参考风格：etniabarcelona.com — 现代简约、留白大气、质感
   ========================================================= */

:root {
    /* ---------- 主色：蓝色系 ---------- */
    --color-primary: #0A3D91;           /* 主品牌深蓝（导航/标题/按钮） */
    --color-primary-hover: #0F52BA;      /* 主色悬停态 */
    --color-primary-light: #E8F0FE;      /* 主色浅背景（标签/选中态） */
    --color-secondary: #1E6FD9;          /* 辅助蓝 — CTA按钮、链接 */
    --color-secondary-hover: #3485EF;
    --color-accent: #4DA3FF;             /* 高亮蓝 — 选中、NEW 标签点缀 */

    /* ---------- 中性色 ---------- */
    --color-bg: #FFFFFF;
    --color-bg-soft: #F6F8FC;            /* 大面积底色 / 区块背景 */
    --color-bg-dark: #0B2545;            /* 页脚深色区 */
    --color-border: #E3E8F0;
    --color-border-dark: #CFD7E4;
    --color-text: #14243D;               /* 主文字（蓝调深灰，不刺眼） */
    --color-text-body: #3C4A63;          /* 正文文字 */
    --color-text-muted: #7A8AA2;         /* 辅助/说明文字 */

    /* ---------- 功能色 ---------- */
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-danger: #EF4444;

    /* ---------- 字体 ---------- */
    --font-sans: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-serif: "Playfair Display", "Source Han Serif", "Noto Serif SC", Georgia, serif; /* 高端标题感 */
    --font-size-hero: clamp(36px, 5vw, 64px);
    --font-size-h1: clamp(28px, 3.5vw, 40px);
    --font-size-h2: clamp(22px, 2.5vw, 30px);
    --font-size-h3: 20px;
    --font-size-body: 15px;
    --font-size-small: 13px;
    --font-size-caption: 12px;

    /* ---------- 字重 ---------- */
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;

    /* ---------- 间距（4px 基准）---------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* ---------- 容器宽度 ---------- */
    --container-max: 1280px;
    --container-padding: var(--space-6);

    /* ---------- 圆角 ---------- */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-full: 999px;

    /* ---------- 阴影（克制，不浮夸）---------- */
    --shadow-sm: 0 1px 2px rgba(10, 61, 145, 0.06);
    --shadow: 0 4px 14px rgba(10, 61, 145, 0.08);
    --shadow-lg: 0 10px 30px rgba(10, 61, 145, 0.12);
    --shadow-pop: 0 20px 48px rgba(10, 61, 145, 0.15);

    /* ---------- 过渡 ---------- */
    --transition-fast: 150ms ease;
    --transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ---------- 导航栏高度 ---------- */
    --nav-height: 80px;
    --nav-height-scrolled: 64px;

    /* ---------- Z 层级 ---------- */
    --z-nav: 100;
    --z-modal: 200;
    --z-toast: 300;
}

/* ---------- 深色偏好（预留，etnia风格实际以浅色为主）---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0B1320;
        --color-bg-soft: #111C30;
        --color-text: #E6ECF5;
        --color-text-body: #B7C2D4;
        --color-text-muted: #7A8AA2;
        --color-border: #1E2B44;
    }
}