/* style.css - Global Styles */
/* 电子元件代理商品牌子目录网站 */
/* Based on DESIGN.md v1.5 */

:root {
  /* 颜色系统 */
  /* 主色调 - 科技蓝 */
  --primary-blue: #0072ce;
  --primary-blue-dark: #005ba3;
  --primary-blue-light: #3395db;
  
  /* CTA 按钮色 - 橙色 */
  --cta-orange: #ff6b00;
  --cta-orange-dark: #cc5500;
  --cta-orange-light: #ff8533;
  
  /* 状态色 */
  --success-green: #28a745;
  --success-green-dark: #1e7e34;
  --warning-orange: #ffc107;
  --warning-orange-dark: #d39e00;
  
  /* 中性色 */
  --bg-white: #ffffff;
  --bg-light: #f8f9fa;
  --bg-gray: #e9ecef;
  
  --text-dark: #333333;
  --text-medium: #666666;
  --text-light: #999999;
  
  --border-light: #e0e0e0;
  --border-medium: #cccccc;
  --border-dark: #999999;
  
  /* 圆角系统 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* 阴影系统 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 6px 12px rgba(0, 0, 0, 0.1);
  --shadow-focus: 0 0 0 3px rgba(0, 114, 206, 0.2);
  
  /* 间距系统 */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
  
  /* 字体系统 */
  --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
}

/* 基础重置 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: var(--bg-white);
}

/* 图片响应式 */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 链接样式 */
a {
  color: var(--primary-blue);
  text-decoration: none;
  transition: color 0.2s ease-out;
}

a:hover {
  color: var(--primary-blue-dark);
}

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

/* 排版系统 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

p {
  margin-bottom: var(--space-4);
}

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

/* 响应式断点 */
@media (max-width: 767px) {
  :root {
    font-size: 16px; /* 避免 iOS 自动缩放 */
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.25rem; }
}

/* 工具类 */
.container {
  width: 100%;
  max-width: 1319px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

@media (max-width: 767px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* Flex 工具 */
.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-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }

/* Grid 工具 */
.grid { display: grid; }
.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); }

/* 间距工具 */
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.p-4 { padding: var(--space-4); }

/* 文本工具 */
.text-center { text-align: center; }
.text-sm { font-size: 0.875rem; }
.text-lg { font-size: 1.25rem; }
.font-bold { font-weight: 700; }

/* 可访问性 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* 焦点样式 */
:focus-visible {
  outline: 2px solid var(--primary-blue);
  outline-offset: 2px;
}

/* 跳过导航链接 */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1001;
  padding: var(--space-2) var(--space-4);
  background: var(--primary-blue);
  color: white;
}

.skip-link:focus {
  top: 0;
}

/* 减少动画 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}