/* ============================================
   GIZEE Design System - CSS Variables
   Based on homepage-design.md specification
   ============================================ */

:root {
  /* ---- Brand Colors ---- */
  --color-primary: #E8713A;          /* 暖橙 */
  --color-primary-dark: #D4612E;     /* 暖橙深色 */
  --color-primary-light: #F5E6C8;    /* 暖橙浅色/金色 */
  --color-dark: #2D2420;             /* 暖黑/主文字 */
  --color-text: #2D2420;             /* 主文字 */
  --color-text-secondary: #6B5E52;   /* 次要文字 */
  --color-border: #E8E0D8;           /* 边框/分割线 */
  --color-bg-warm: #F7F2ED;          /* 暖灰100/浅背景 */
  --color-bg-white: #FFFFFF;
  --color-bg-dark: #2D2420;          /* Footer深色背景 */
  --color-text-light: #F7F2ED;       /* 深色背景上的文字 */
  --color-text-muted: #E8E0D8;       /* 深色背景上次要文字 */
  --color-gold: #D4A853;             /* 提示框金色 */
  --color-success: #4CAF50;          /* 成功/完成 */
  --color-danger: #E53935;           /* 警告/错误 */
  --color-whatsapp: #25D366;         /* WhatsApp绿 */

  /* ---- Gradients ---- */
  --gradient-hero: linear-gradient(135deg, #FFF9F5, #F5E6C8, #FFF9F5);

  /* ---- Typography ---- */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* ---- Border Radius ---- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 20px;

  /* ---- Shadows ---- */
  --shadow-card: 0 2px 8px rgba(45,36,32,0.08);
  --shadow-card-hover: 0 8px 24px rgba(45,36,32,0.12);
  --shadow-modal: 0 16px 48px rgba(45,36,32,0.2);
  --shadow-header: 0 1px 4px rgba(45,36,32,0.06);

  /* ---- Spacing ---- */
  --section-padding-desktop: 80px 0;
  --section-padding-mobile: 48px 0;
  --container-max: 1200px;
  --container-padding: 0 20px;

  /* ---- Transitions ---- */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;

  /* ---- Z-index ---- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-modal: 200;
  --z-overlay: 150;
}