/* 
 * North American Market - Variables CSS
 * 定义北美市场页面使用的颜色、字体和其他变量
 */

:root {
    /* 品牌主色 - 美国国旗色调 */
    --na-primary: #3C3B6E;       /* 深蓝色 */
    --na-secondary: #B22234;     /* 红色 */
    --na-accent: #FFFFFF;        /* 白色 */
    --na-highlight: #0A3161;     /* 亮蓝色 */
    
    /* RGBA颜色值，用于透明度处理 */
    --na-primary-rgb: 60, 59, 110;
    --na-secondary-rgb: 178, 34, 52;
    --na-highlight-rgb: 10, 49, 97;
    
    /* 中性色 */
    --na-dark: #212529;          /* 深灰色文本 */
    --na-text: #495057;          /* 主体文本 */
    --na-light-text: #6C757D;    /* 次要文本 */
    --na-border: #DEE2E6;        /* 边框色 */
    --na-light-bg: #F8F9FA;      /* 浅色背景 */
    --na-bg: #FFFFFF;            /* 白色背景 */
    
    /* 功能色 */
    --na-success: #28A745;       /* 成功绿 */
    --na-info: #17A2B8;          /* 信息蓝 */
    --na-warning: #FFC107;       /* 警告黄 */
    --na-danger: #DC3545;        /* 危险红 */
    
    /* 渐变色 */
    --na-gradient-blue: linear-gradient(135deg, #0A3161 0%, #3C3B6E 100%);
    --na-gradient-red: linear-gradient(135deg, #B22234 0%, #A91B2D 100%);
    --na-gradient-mixed: linear-gradient(135deg, #3C3B6E 0%, #B22234 100%);
    
    /* 阴影 */
    --na-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --na-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --na-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    
    /* 圆角 */
    --na-radius-sm: 4px;
    --na-radius: 8px;
    --na-radius-lg: 16px;
    
    /* 过渡 */
    --na-transition: all 0.3s ease;
    --na-transition-fast: all 0.15s ease;
    --na-transition-slow: all 0.5s ease;
    
    /* 字体 */
    --na-font-main: 'Helvetica Neue', Arial, sans-serif;
    --na-font-heading: 'Georgia', 'Times New Roman', serif;
    --na-font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    
    /* 字体大小 */
    --na-font-xs: 0.75rem;      /* 12px */
    --na-font-sm: 0.875rem;     /* 14px */
    --na-font-base: 1rem;       /* 16px */
    --na-font-md: 1.125rem;     /* 18px */
    --na-font-lg: 1.25rem;      /* 20px */
    --na-font-xl: 1.5rem;       /* 24px */
    --na-font-2xl: 1.875rem;    /* 30px */
    --na-font-3xl: 2.25rem;     /* 36px */
    --na-font-4xl: 3rem;        /* 48px */
    
    /* 行高 */
    --na-line-height-tight: 1.25;
    --na-line-height-normal: 1.5;
    --na-line-height-loose: 1.75;
    
    /* 间距 */
    --na-spacing-xs: 0.25rem;    /* 4px */
    --na-spacing-sm: 0.5rem;     /* 8px */
    --na-spacing-md: 1rem;       /* 16px */
    --na-spacing-lg: 1.5rem;     /* 24px */
    --na-spacing-xl: 2rem;       /* 32px */
    --na-spacing-2xl: 3rem;      /* 48px */
    --na-spacing-3xl: 4rem;      /* 64px */
    
    /* Z-index层级 */
    --na-z-below: -1;
    --na-z-normal: 1;
    --na-z-above: 10;
    --na-z-fixed: 100;
    --na-z-modal: 1000;
}