/* ========================================
   CSS变量系统 - 魔法少女主题
   ======================================== */

:root {
  /* ========== 主色调 - 粉色系 ========== */
  --color-primary-pink: #FFB6C1;      /* 浅粉 */
  --color-secondary-pink: #FF69B4;    /* 亮粉 */
  --color-accent-pink: #FF1493;       /* 深粉 */

  /* ========== 辅助色 - 梦幻色系 ========== */
  --color-lavender: #E6E6FA;          /* 薰衣草紫 */
  --color-sky-blue: #87CEEB;          /* 天蓝 */
  --color-mint: #98FB98;              /* 薄荷绿 */
  --color-gold: #FFD700;              /* 金色 */
  --color-peach: #FFDAB9;             /* 桃色 */

  /* ========== 中性色 ========== */
  --color-white: #FFFFFF;
  --color-cream: #FFFDD0;
  --color-text: #4A4A4A;
  --color-text-light: #8A8A8A;
  --color-border: #FFE4E1;

  /* ========== 渐变色 ========== */
  --gradient-main: linear-gradient(135deg, #FFB6C1 0%, #FF69B4 50%, #FF1493 100%);
  --gradient-dream: linear-gradient(135deg, #E6E6FA 0%, #87CEEB 100%);
  --gradient-magical: linear-gradient(45deg, #FF69B4, #FFD700, #98FB98);
  --gradient-soft: linear-gradient(135deg, #FFE4E1 0%, #FFB6C1 100%);
  --gradient-card: linear-gradient(145deg, #ffffff 0%, #FFFDD0 100%);

  /* ========== 阴影 ========== */
  --shadow-soft: 0 10px 30px rgba(255, 105, 180, 0.3);
  --shadow-glow: 0 0 20px rgba(255, 182, 193, 0.6);
  --shadow-card: 0 4px 15px rgba(255, 105, 180, 0.2);
  --shadow-button: 0 5px 20px rgba(255, 20, 147, 0.4);

  /* ========== 圆角 ========== */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-full: 50%;

  /* ========== 字体大小 ========== */
  --font-size-xs: 0.75rem;     /* 12px */
  --font-size-sm: 0.875rem;    /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;    /* 18px */
  --font-size-xl: 1.5rem;      /* 24px */
  --font-size-2xl: 2rem;       /* 32px */
  --font-size-3xl: 3rem;       /* 48px */
  --font-size-4xl: 4rem;       /* 64px */

  /* ========== 字体族 ========== */
  --font-primary: 'Georgia', 'Times New Roman', serif;
  --font-secondary: 'Arial', 'Helvetica', sans-serif;
  --font-accent: 'Comic Sans MS', 'Chalkboard SE', cursive;

  /* ========== 间距 ========== */
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-2xl: 4rem;     /* 64px */
  --spacing-3xl: 6rem;     /* 96px */

  /* ========== 过渡时间 ========== */
  --transition-fast: 0.2s;
  --transition-base: 0.3s;
  --transition-slow: 0.5s;
  --transition-slower: 0.8s;

  /* ========== 缓动函数 ========== */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* ========== Z-index层级 ========== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
}