/* ============================================================
   CSS 自定义属性（设计 Token）— 国际蓝风格 (2026 refresh)
   所有颜色、字号、圆角、阴影、字体统一在此定义
   ------------------------------------------------------------
   配色方针：
   - 主色 #1A3A7E (trust navy)：品牌、导航、链接、标题强调
   - 辅色 #FF6A00 (action orange)：CTA、购买按钮、询盘、强提示
   - 灰阶 (slate 50-900)：文字层次、分割线、背景层次
   ============================================================ */

/* Inter 作为主字体；中文使用系统 PingFang / 微软雅黑 fallback */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    /* -------------------- 品牌主色（信任蓝） -------------------- */
    --color-primary:        #1A3A7E;   /* 主品牌色 */
    --color-primary-dark:   #0F2557;   /* hover / active */
    --color-primary-darker: #081933;   /* 页脚等深色背景 */
    --color-primary-light:  #E8EEF9;   /* 浅色底 */
    --color-primary-lightest:#F5F8FE;  /* 极浅底、section 背景 */
    --color-primary-grad:       linear-gradient(135deg, #1A3A7E 0%, #2B5CB0 100%);
    --color-primary-grad-hover: linear-gradient(135deg, #0F2557 0%, #1F4A95 100%);

    /* -------------------- 辅助色（动作橙 CTA） -------------------- */
    --color-accent:         #FF6A00;   /* 主 CTA */
    --color-accent-dark:    #E55A00;   /* CTA hover */
    --color-accent-light:   #FFF3E8;   /* tint */
    --color-accent-grad:       linear-gradient(135deg, #FF6A00 0%, #FF8A34 100%);
    --color-accent-grad-hover: linear-gradient(135deg, #E55A00 0%, #FF7416 100%);

    /* -------------------- 语义色 -------------------- */
    --color-success: #0BA55A;
    --color-warning: #F5A524;
    --color-danger:  #DC2626;
    --color-info:    #2B5CB0;

    /* -------------------- 灰阶（Slate） -------------------- */
    --color-gray-50:  #F8FAFC;
    --color-gray-100: #F1F5F9;
    --color-gray-200: #E2E8F0;
    --color-gray-300: #CBD5E1;
    --color-gray-400: #94A3B8;
    --color-gray-500: #64748B;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1E293B;
    --color-gray-900: #0F172A;

    /* -------------------- 文字色 -------------------- */
    --color-text:           #1E293B;   /* 正文主色 */
    --color-text-strong:    #0F172A;   /* 标题强化 */
    --color-text-secondary: #475569;   /* 次级文字 */
    --color-text-muted:     #94A3B8;   /* 辅助提示文字 */
    --color-text-white:     #FFFFFF;
    --color-text-link:      var(--color-primary);

    /* -------------------- 背景色 -------------------- */
    --color-bg-white:  #FFFFFF;
    --color-bg-gray:   #F8FAFC;
    --color-bg-light:  #F1F5F9;
    --color-bg-dark:   var(--color-primary-darker);
    --color-border:    #E2E8F0;
    --color-border-strong: #CBD5E1;

    /* -------------------- 字体 -------------------- */
    --font-base: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
                 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'PingFang SC',
                    'Microsoft YaHei', Helvetica, Arial, sans-serif;

    /* -------------------- 圆角 -------------------- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-pill: 999px;

    /* -------------------- 阴影（多层柔光） -------------------- */
    --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-sm:  0 2px 4px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --shadow-md:  0 4px 10px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --shadow-lg:  0 10px 24px rgba(15, 23, 42, 0.08), 0 4px 10px rgba(15, 23, 42, 0.04);
    --shadow-xl:  0 20px 40px rgba(15, 23, 42, 0.10), 0 8px 16px rgba(15, 23, 42, 0.05);
    --shadow-brand: 0 10px 24px rgba(26, 58, 126, 0.18);
    --shadow-accent: 0 8px 18px rgba(255, 106, 0, 0.28);

    /* -------------------- 间距节奏 -------------------- */
    --space-xs:   4px;
    --space-sm:   8px;
    --space-md:   16px;
    --space-lg:   24px;
    --space-xl:   32px;
    --space-2xl:  48px;
    --space-3xl:  64px;
    --section-gap: 24px;

    /* -------------------- 过渡 -------------------- */
    --transition-fast: all 0.15s ease;
    --transition-base: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* -------------------- 容器宽度 -------------------- */
    --container-max-width: 1400px;

    /* -------------------- 字号体系 -------------------- */
    --font-size-xs:    12px;
    --font-size-sm:    14px;
    --font-size-base:  15px;   /* 阿里国际站主流正文 15px */
    --font-size-md:    17px;
    --font-size-lg:    20px;
    --font-size-xl:    24px;
    --font-size-2xl:   32px;
    --font-size-3xl:   40px;
    --font-size-4xl:   56px;   /* Hero H1 */

    /* -------------------- 行高 -------------------- */
    --line-height-tight:  1.25;
    --line-height-base:   1.55;
    --line-height-relaxed:1.75;

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