/* ============================================
   variables.css
   果赖蛋糕坊 - 全局 CSS 变量定义
   马卡龙配色 · 圆润可爱风格
   ============================================ */

:root {
  /* ---------- 马卡龙色系 · 主色 ---------- */
  --pink: #FFB6C1;
  --pink-light: #FFE4EC;
  --pink-dark: #FF8FA8;

  --purple: #D8BFD8;
  --purple-light: #ECD9EC;
  --purple-dark: #B794D4;

  --blue: #AEC6E6;
  --blue-light: #D6E4F5;
  --blue-dark: #7BA7D9;

  --green: #B5E7B5;
  --green-light: #D9F2D9;
  --green-dark: #8FD08F;

  --yellow: #FFEB9C;
  --yellow-light: #FFF6D1;
  --yellow-dark: #FFD966;

  /* ---------- 辅助色 ---------- */
  --white: #FFFFFF;
  --cream: #FFF9F5;
  --bg: #FFF5F8;
  --bg-gradient-start: #FFE4EC;
  --bg-gradient-mid: #ECD9EC;
  --bg-gradient-end: #D6E4F5;

  --text: #5A4A6A;
  --text-light: #9B8AAE;
  --text-inverse: #FFFFFF;
  --border: #F0E0EC;
  --border-strong: #E0C9DC;

  --orange: #FFCC80;
  --orange-dark: #FFB74D;
  --brown: #D7B392;
  --choco: #8B5E3C;
  --strawberry: #FF6B9D;
  --matcha: #9ACD68;

  /* ---------- 阴影 ---------- */
  --shadow-sm: 0 2px 4px rgba(180, 140, 170, 0.15);
  --shadow: 0 4px 12px rgba(180, 140, 170, 0.18);
  --shadow-md: 0 6px 20px rgba(180, 140, 170, 0.22);
  --shadow-lg: 0 12px 32px rgba(180, 140, 170, 0.28);
  --shadow-glow-pink: 0 0 16px rgba(255, 182, 193, 0.6);
  --shadow-glow-purple: 0 0 16px rgba(216, 191, 216, 0.6);
  --shadow-glow-blue: 0 0 16px rgba(174, 198, 230, 0.6);
  --shadow-inner: inset 0 2px 6px rgba(180, 140, 170, 0.15);
  --shadow-press: inset 0 2px 4px rgba(180, 140, 170, 0.25);

  /* ---------- 圆角 ---------- */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-full: 9999px;

  /* ---------- 间距 ---------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* ---------- 过渡时间 ---------- */
  --t-fast: 0.15s;
  --t: 0.25s;
  --t-slow: 0.4s;
  --t-bounce: 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 字体栈 ---------- */
  --font-sans: "Baloo 2", "Fredoka", "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, "Noto Sans SC", sans-serif;
  --font-rounded: "Baloo 2", "Fredoka", "Hiragino Sans GB", "PingFang SC",
    "Microsoft YaHei", "Yuanti SC", "Noto Sans SC", sans-serif;
  --font-display: "Baloo 2", "Fredoka", "PingFang SC", "Yuanti SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: "SF Mono", "Monaco", "Consolas", "Courier New", monospace;

  /* ---------- 字号 ---------- */
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fs-2xl: 30px;

  /* ---------- 字重 ---------- */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 600;
  --fw-black: 700;

  /* ---------- 层级 z-index ---------- */
  --z-header: 100;
  --z-canvas: 10;
  --z-control: 200;
  --z-tabbar: 300;
  --z-modal: 500;
  --z-overlay: 600;
  --z-toast: 999;

  /* ---------- 尺寸 ---------- */
  --header-h: 52px;
  --tabbar-h: 64px;
  --control-h: 45vh;
  --control-h-collapsed: 56px;

  /* ---------- 安全区变量 ---------- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- 按钮高度 ---------- */
  --btn-h: 44px;
  --btn-h-sm: 36px;
  --btn-h-lg: 52px;
}