/* ============================================================
   CSS 变量定义文件 (Design Tokens)
   麻豆tv创意广告与商业短片制作公司官方网站模板
   说明：全局设计令牌，便于一键换肤和维护
   ============================================================ */

:root {
  /* 主色调 */
  --primary: #FF6B35;       /* 主色：亮橙色，核心按钮、强调文字、重要图标 */
  --secondary: #2D2D2D;    /* 辅色：深灰色，导航栏、页脚、深色区块背景 */
  --bg: #FAFAFA;            /* 背景色：极浅灰，全局背景 */
  --card-bg: #FFFFFF;       /* 卡片背景色：纯白 */
  --accent: #FF8C42;        /* 强调色：浅橙，悬停效果、渐变过渡 */
  --text: #1A1A1A;          /* 文字色：近黑色，主要文本 */
  --text-light: #666666;    /* 浅色文字：辅助说明、日期、标签 */
  --border-color: #EAEAEA;  /* 边框色：浅灰色，分割线、卡片边框 */

  /* 字体系统 */
  --font-heading: 'Montserrat', 'Noto Sans SC', sans-serif;
  --font-body: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;

  /* 字体大小 - 流式排版 */
  --fs-hero: clamp(2.5rem, 5vw + 1rem, 5rem);
  --fs-h1: clamp(2rem, 3vw + 0.5rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 2vw + 0.25rem, 1.75rem);
  --fs-body: clamp(0.95rem, 1vw + 0.5rem, 1.125rem);
  --fs-small: clamp(0.8rem, 0.8vw + 0.4rem, 0.9rem);

  /* 间距系统 */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 6rem;
  --space-2xl: 8rem;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 12px 40px rgba(255, 107, 53, 0.2);

  /* 过渡 */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* 容器最大宽度 */
  --container-max: 1400px;
  --container-narrow: 900px;

  /* Z-index 层级 */
  --z-nav: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
}