/* ============================================================
   variables.css — 雅致齿科 设计系统 Token
   所有 CSS 自定义属性集中管理，确保全站视觉一致性
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     颜色 — 品牌色
     ---------------------------------------------------------- */
  --color-pearl-white: #FAFAFA;
  --color-pure-white: #FFFFFF;
  --color-graphite-black: #111111;
  --color-deep-sea-blue: #0F172A;
  --color-champagne-gold: #D4AF37;
  --color-platinum-gray: #94A3B8;

  /* 金色变体 */
  --color-gold-hover: #C9A430;
  --color-gold-light: rgba(212, 175, 55, 0.1);
  --color-gold-medium: rgba(212, 175, 55, 0.2);
  --color-gold-shadow: rgba(212, 175, 55, 0.3);
  --color-gold-border: rgba(212, 175, 55, 0.5);

  /* 中性色 */
  --color-text-secondary: #666666;
  --color-text-muted: #999999;
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-border-subtle: rgba(0, 0, 0, 0.05);
  --color-bg-hover: rgba(0, 0, 0, 0.04);

  /* 白色透明变体（用于深色背景） */
  --color-white-05: rgba(255, 255, 255, 0.05);
  --color-white-08: rgba(255, 255, 255, 0.08);
  --color-white-10: rgba(255, 255, 255, 0.1);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-20: rgba(255, 255, 255, 0.2);
  --color-white-40: rgba(255, 255, 255, 0.4);
  --color-white-60: rgba(255, 255, 255, 0.6);
  --color-white-85: rgba(255, 255, 255, 0.85);
  --color-white-95: rgba(255, 255, 255, 0.95);
  --color-white-98: rgba(255, 255, 255, 0.98);

  /* ----------------------------------------------------------
     字体
     ---------------------------------------------------------- */
  --font-cn: 'PingFang SC', 'Source Han Sans SC', 'Noto Sans SC', sans-serif;
  --font-en: 'Inter', -apple-system, 'SF Pro Display', sans-serif;

  /* 字号 */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.8rem;     /* 12.8px */
  --text-base: 0.85rem;  /* 13.6px */
  --text-md: 0.9rem;     /* 14.4px */
  --text-lg: 0.95rem;    /* 15.2px */
  --text-xl: 1rem;       /* 16px */
  --text-2xl: 1.1rem;    /* 17.6px */
  --text-3xl: 1.2rem;    /* 19.2px */
  --text-4xl: 1.25rem;   /* 20px */

  /* 字重 */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* 行高 */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* 字间距 */
  --tracking-tight: 0.02em;
  --tracking-normal: 0.03em;
  --tracking-wide: 0.05em;

  /* ----------------------------------------------------------
     间距 — 基于 4px 的间距系统
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

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

  /* ----------------------------------------------------------
     过渡
     ---------------------------------------------------------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
  --transition-smooth: 0.6s ease;
  --transition-cubic: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

  /* ----------------------------------------------------------
     阴影
     ---------------------------------------------------------- */
  --shadow-xs: 0 1px 4px rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.08);
  --shadow-header: 0 2px 20px rgba(0, 0, 0, 0.06);
  --shadow-gold: 0 4px 12px rgba(212, 175, 55, 0.3);
  --shadow-gold-lg: 0 6px 20px rgba(212, 175, 55, 0.3);
  --shadow-float: 0 8px 30px rgba(0, 0, 0, 0.12);

  /* ----------------------------------------------------------
     Z-Index 层级
     ---------------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 500;
  --z-header: 1000;
  --z-mobile-menu: 1500;
  --z-modal: 2000;
  --z-toast: 2500;
  --z-tooltip: 3000;

  /* ----------------------------------------------------------
     布局
     ---------------------------------------------------------- */
  --max-width: 1440px;
  --content-width: 1200px;
  --header-height: 72px;

  /* ----------------------------------------------------------
     毛玻璃效果
     ---------------------------------------------------------- */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(40px);
}