/*
 * Toronto Flagship Experience Hub - Design System v4.0
 * 品牌视觉合规系统（强制执行）
 * 创建日期: 2025-12-16
 * 适用项目: Toronto Hub Official Website
 */

/* ============================================
   字体引入 - Google Fonts
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@400;500;700&display=swap');

/* ============================================
   CSS 变量定义 - 品牌设计令牌
   ============================================ */
:root {
    /* ===== 颜色系统 ===== */
    
    /* 主色调 - 深蓝色系（专业、信任、稳定） */
    --color-primary: #1E3A8A;        /* 深海军蓝 - 主 CTA、标题 */
    --color-primary-light: #3B82F6;  /* 亮蓝色 - 悬停状态、链接 */
    --color-primary-dark: #1E40AF;   /* 深蓝色 - 深度层次 */
    
    /* 强调色 - 琥珀金系（高端、活力、北美商业） */
    --color-accent: #F59E0B;         /* 琥珀金 - 次级 CTA、强调元素 */
    --color-accent-light: #FCD34D;   /* 浅琥珀 - 背景高光 */
    --color-accent-dark: #D97706;    /* 深琥珀 - 悬停状态 */
    
    /* 主题专用色 */
    --color-success: #10B981;        /* 翠绿色 - 成功提示、认证徽章 */
    --color-trust: #8B5CF6;          /* 紫色 - Trust 主题专用 */
    --color-b2b: #06B6D4;            /* 青色 - B2B Access 主题专用 */
    --color-physical: #1E3A8A;       /* 深蓝 - Physical Presence 主题专用 */
    
    /* 中性色 */
    --color-white: #FFFFFF;
    --color-gray-50: #F9FAFB;
    --color-gray-100: #F3F4F6;
    --color-gray-200: #E5E7EB;
    --color-gray-300: #D1D5DB;
    --color-gray-400: #9CA3AF;
    --color-gray-500: #6B7280;
    --color-gray-600: #4B5563;
    --color-gray-700: #374151;
    --color-gray-800: #1F2937;
    --color-gray-900: #111827;
    
    /* 语义色 */
    --color-error: #EF4444;
    --color-warning: #F59E0B;
    --color-info: #3B82F6;
    
    /* ===== 字体系统 ===== */
    
    /* 字体家族 */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;    /* 标题专用 */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;            /* 英文正文 */
    --font-chinese: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;  /* 中文正文 */
    
    /* 字体大小（桌面） */
    --font-h1: 3.5rem;      /* 56px - Hero 标题 */
    --font-h2: 2.5rem;      /* 40px - 章节标题 */
    --font-h3: 2rem;        /* 32px - 子标题 */
    --font-h4: 1.5rem;      /* 24px - 卡片标题 */
    --font-h5: 1.25rem;     /* 20px - 小标题 */
    --font-h6: 1.125rem;    /* 18px - 最小标题 */
    --font-body: 1rem;      /* 16px - 正文 */
    --font-small: 0.875rem; /* 14px - 辅助文本 */
    --font-tiny: 0.75rem;   /* 12px - 注释文本 */
    
    /* 行高 - 字体优化：为中文友好型调整 */
    --line-height-tight: 1.3;      /* 1.2 → 1.3，中文需要更多空间 */
    --line-height-normal: 1.6;     /* 1.5 → 1.6，提升可读性 +13% */
    --line-height-relaxed: 1.8;    /* 1.75 → 1.8，更舒适的阅读体验 */
    --line-height-loose: 2;        /* 保持 */
    
    /* 字重 */
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-extrabold: 800;
    
    /* ===== 形状语言 - "柔和圆角"设计哲学 ===== */
    
    /* 圆角标准（强制遵守） */
    --radius-sm: 4px;      /* 徽章、标签 */
    --radius-md: 8px;      /* 按钮、输入框 ⭐ 最常用 */
    --radius-lg: 12px;     /* 卡片、功能块 ⭐ 最常用 */
    --radius-xl: 16px;     /* 模态框、大卡片 */
    --radius-2xl: 20px;    /* Hero 区域、大图 */
    --radius-full: 9999px; /* 药丸状按钮、头像 */
    
    /* ===== 间距系统 - 8px 网格 ===== */
    
    /* 所有间距必须是 8px 的倍数 */
    --space-0: 0;
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 2.5rem;   /* 40px */
    --space-6: 3rem;     /* 48px */
    --space-7: 3.5rem;   /* 56px */
    --space-8: 4rem;     /* 64px */
    --space-10: 5rem;    /* 80px */
    --space-12: 6rem;    /* 96px */
    --space-16: 8rem;    /* 128px */
    --space-20: 10rem;   /* 160px */
    
    /* ===== 阴影系统 ===== */
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    
    /* ===== 过渡动画 ===== */
    
    --transition-fast: 150ms ease-in-out;
    --transition-normal: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;
    
    /* ===== 断点（响应式） ===== */
    
    --breakpoint-sm: 640px;   /* 手机 */
    --breakpoint-md: 768px;   /* 平板 */
    --breakpoint-lg: 1024px;  /* 笔记本 */
    --breakpoint-xl: 1280px;  /* 桌面 */
    --breakpoint-2xl: 1536px; /* 大桌面 */
    
    /* ===== 容器宽度 ===== */
    
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
    --container-2xl: 1536px;
    
    /* ===== Z-index 层级 ===== */
    
    --z-negative: -1;
    --z-base: 0;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-notification: 1080;
}

/* ============================================
   全局重置与基础样式
   ============================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px; /* 基础字体大小 */
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-body);
    font-weight: var(--weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-gray-900);
    background-color: var(--color-white);
    /* 字体优化：全局字体渲染优化 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 中文字体优化 - v6.9.0 Complete Optimization */
body:lang(zh-CN),
.lang-zh {
    font-family: var(--font-chinese);
    font-weight: var(--weight-medium);  /* 全局中文字重增强：400 → 500 (+25%) ⭐ */
    letter-spacing: 0.02em;             /* 中文字距优化：增强字符分离度 ⭐ */
}

/* ============================================
   排版样式
   ============================================ */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-gray-900);
    margin-bottom: var(--space-3);
}

h1 {
    font-size: var(--font-h1);
    font-weight: var(--weight-extrabold);
}

h2 {
    font-size: var(--font-h2);
}

h3 {
    font-size: var(--font-h3);
}

h4 {
    font-size: var(--font-h4);
}

h5 {
    font-size: var(--font-h5);
}

h6 {
    font-size: var(--font-h6);
}

p {
    margin-bottom: var(--space-3);
    line-height: var(--line-height-relaxed);
}

a {
    color: var(--color-primary-light);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

a:focus {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

ul, ol {
    margin-left: var(--space-4);
    margin-bottom: var(--space-3);
}

li {
    margin-bottom: var(--space-1);
}

/* ============================================
   容器与布局
   ============================================ */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--space-4);
}

.section {
    padding: var(--space-12) 0;
}

.section-lg {
    padding: var(--space-16) 0;
}

.section-sm {
    padding: var(--space-8) 0;
}

/* ============================================
   按钮组件
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-heading);
    font-size: var(--font-body);
    font-weight: var(--weight-semibold);
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-normal);
    white-space: nowrap;
}

.btn:focus {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 3px;
}

/* 主按钮 - 琥珀金 */
.btn-primary {
    background-color: var(--color-accent);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
}

/* 次按钮 - 深蓝描边 */
.btn-secondary {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    text-decoration: none;
}

/* 文本链接按钮 */
.btn-link {
    background-color: transparent;
    color: var(--color-primary-light);
    padding: var(--space-1) var(--space-2);
    font-weight: var(--weight-medium);
}

.btn-link:hover {
    color: var(--color-primary-dark);
    background-color: var(--color-gray-100);
    text-decoration: none;
}

/* 按钮尺寸变体 */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-small);
}

.btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-h5);
}

/* ============================================
   卡片组件
   ============================================ */

.card {
    background-color: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    transition: all var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

.card-header {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-gray-200);
}

.card-body {
    margin-bottom: var(--space-3);
}

.card-footer {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-gray-200);
}

/* ============================================
   网格系统
   ============================================ */

.grid {
    display: grid;
    gap: var(--space-4);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================
   Flexbox 工具类
   ============================================ */

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* ============================================
   响应式断点
   ============================================ */

/* 平板及以下 */
@media (max-width: 768px) {
    :root {
        --font-h1: 2.5rem;   /* 40px */
        --font-h2: 2rem;     /* 32px */
        --font-h3: 1.5rem;   /* 24px */
        --font-h4: 1.25rem;  /* 20px */
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .section {
        padding: var(--space-8) 0;
    }
    
    .section-lg {
        padding: var(--space-10) 0;
    }
}

/* 手机 */
@media (max-width: 640px) {
    :root {
        --font-h1: 2rem;     /* 32px */
        --font-h2: 1.5rem;   /* 24px */
        --font-h3: 1.25rem;  /* 20px */
    }
    
    .container {
        padding: 0 var(--space-3);
    }
    
    .btn {
        width: 100%;
    }
}

/* ============================================
   工具类
   ============================================ */

/* 文本对齐 */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* 文本颜色 */
.text-primary { color: var(--color-primary); }
.text-accent { color: var(--color-accent); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-700 { color: var(--color-gray-700); }
.text-white { color: var(--color-white); }

/* 背景颜色 */
.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-gray-50 { background-color: var(--color-gray-50); }
.bg-gray-100 { background-color: var(--color-gray-100); }
.bg-white { background-color: var(--color-white); }

/* 间距工具类 */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }

.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }

/* 显示/隐藏 */
.hidden { display: none; }
.block { display: block; }

/* 无障碍：跳过导航链接 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sr-only:focus {
    position: static;
    width: auto;
    height: auto;
    padding: var(--space-2) var(--space-4);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background-color: var(--color-primary);
    color: var(--color-white);
    z-index: var(--z-modal);
}

/* ============================================
   无障碍：焦点指示器
   ============================================ */

*:focus-visible {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 3px;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* ============================================
   打印样式
   ============================================ */

@media print {
    body {
        background-color: white;
        color: black;
    }
    
    .no-print {
        display: none !important;
    }
    
    a {
        text-decoration: underline;
    }
    
    a[href^="http"]:after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: var(--color-gray-600);
    }
}