/* ============================================================
 * variables.css —— 设计 Token
 * 全局 CSS 变量，颜色 / 间距 / 字号 / 阴影 / 圆角 / 层级
 * ============================================================ */

:root {
  /* ============ 颜色 Token ============ */
  --color-primary-900: #1E3A8A;
  --color-primary-700: #1E40AF;
  --color-primary-600: #2563EB;    /* 主色 */
  --color-primary-500: #3B82F6;
  --color-primary-100: #DBEAFE;
  --color-primary-50:  #EFF6FF;

  --color-accent:       #06B6D4;   /* 青色辅助 */
  --color-accent-light: #67E8F9;

  --color-gray-900: #0F172A;       /* 主标题 */
  --color-gray-700: #334155;       /* 正文 */
  --color-gray-500: #64748B;       /* 辅助文本 */
  --color-gray-400: #94A3B8;
  --color-gray-300: #CBD5E1;       /* 边框 */
  --color-gray-200: #E2E8F0;
  --color-gray-100: #F1F5F9;       /* 浅背景 */
  --color-gray-50:  #F8FAFC;
  --color-white:    #FFFFFF;

  --color-success: #10B981;
  --color-danger:  #EF4444;
  --color-warning: #F59E0B;

  /* ============ 渐变 ============ */
  --gradient-primary:   linear-gradient(135deg, #1E40AF 0%, #2563EB 50%, #06B6D4 100%);
  --gradient-primary-soft: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  --gradient-hero-bg:   radial-gradient(ellipse at top right, #DBEAFE 0%, #FFFFFF 60%);
  --gradient-text:      linear-gradient(135deg, #1E40AF 0%, #06B6D4 100%);

  /* ============ 字号（rem，根字号 16px） ============ */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.25rem;
  --fs-2xl:  1.5rem;
  --fs-3xl:  2.25rem;
  --fs-4xl:  3rem;
  --fs-5xl:  3.5rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --line-height-tight:  1.2;
  --line-height-normal: 1.6;
  --line-height-loose:  1.8;

  /* ============ 间距（8 倍数体系） ============ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  /* ============ 圆角 ============ */
  --radius-sm:   4px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ============ 阴影 ============ */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow:    0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.07), 0 2px 4px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.10), 0 4px 6px rgba(15, 23, 42, 0.05);
  --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.10), 0 10px 10px rgba(15, 23, 42, 0.04);
  --shadow-primary-md: 0 4px 12px rgba(37, 99, 235, 0.20);
  --shadow-primary-lg: 0 8px 24px rgba(37, 99, 235, 0.25);

  /* ============ 过渡 ============ */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 150ms;
  --duration:      300ms;
  --duration-slow: 500ms;

  /* ============ 层级 ============ */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;

  /* ============ 容器 ============ */
  --container-max:     1200px;
  --container-padding: 24px;
  --header-height:     72px;
}

/* 平板降级 */
@media (max-width: 1199px) {
  :root {
    --fs-5xl: 3rem;
    --fs-4xl: 2.5rem;
    --fs-3xl: 2rem;
    --space-8: 80px;
  }
}

/* 移动降级 */
@media (max-width: 767px) {
  :root {
    --fs-5xl: 2.25rem;
    --fs-4xl: 1.875rem;
    --fs-3xl: 1.5rem;
    --fs-2xl: 1.25rem;
    --space-7: 48px;
    --space-8: 64px;
    --container-padding: 16px;
    --header-height: 60px;
  }
}