/* ===== 碰一碰 · 青玉统一（浅） / 金 CTA（深）=====
 *
 * 复盘：浅色金按钮怎么调都偏丑；深色金 CTA 尚可。
 * 定稿：浅色主行动 = 青玉（与 Tab 同色系才协调）；金色只点金额。
 *       深色保持雅金 CTA。
 */
:root {
  /* 青玉：骨架 + 浅色主 CTA */
  --primary: #1A7A78;
  --primary-light: #2B9692;
  --primary-dark: #135E5C;
  --primary-muted: rgba(26, 122, 120, 0.10);
  --primary-gradient: linear-gradient(135deg, #135E5C 0%, #1A7A78 55%, #2B9692 100%);

  --water: #1A7A78;
  --water-light: #2B9692;
  --water-muted: rgba(26, 122, 120, 0.10);

  /* 雅金：浅色仅金额/少量高亮，不做大按钮 */
  --accent: #B79A5C;
  --accent-light: #CDB87A;
  --accent-dark: #9A7E45;
  --accent-muted: rgba(183, 154, 92, 0.14);
  --accent-gradient: linear-gradient(135deg, #9A7E45 0%, #B79A5C 50%, #CDB87A 100%);

  /* 浅色 CTA = 青玉（统一协调的关键） */
  --cta-gradient: var(--primary-gradient);
  --cta-ink: #FFFFFF;
  --cta-ink-soft: rgba(255, 255, 255, 0.78);
  --cta-on-soft: rgba(255, 255, 255, 0.18);
  --cta-shadow: 0 6px 18px rgba(26, 122, 120, 0.28);

  --success: #2A9B7A;
  --info: #1A7A78;
  --warning: #C4A35A;
  --error: #D15C5C;

  /* 清雾近白 —— 土辅极淡，不抢、不发黄 */
  --bg: #F7F8F7;
  --card-bg: rgba(255, 255, 255, 0.96);
  --card-bg-solid: #FFFFFF;
  --bg-tertiary: #EEF1F0;

  --text-primary: #1A2221;
  --text-secondary: #5A6866;
  --text-muted: #8B9896;
  --text-tertiary: #6E7C7A;

  /* 边框走青玉淡色 */
  --border: rgba(26, 122, 120, 0.10);
  --divider: #E5E9E8;
  --border-light: rgba(26, 34, 33, 0.04);

  --skeleton-base: rgba(27, 124, 122, 0.08);
  --skeleton-shine: rgba(255, 255, 255, 0.5);

  --shadow-xs: 0 1px 2px rgba(28, 36, 35, 0.04);
  --shadow-sm: 0 2px 10px rgba(27, 124, 122, 0.06);
  --shadow: 0 4px 18px rgba(27, 124, 122, 0.08);
  --shadow-md: 0 8px 26px rgba(27, 124, 122, 0.10);
  --shadow-lg: 0 14px 36px rgba(27, 124, 122, 0.12);
  --shadow-glow: 0 0 36px rgba(27, 124, 122, 0.12);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 100px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space: 12px;
  --space-md: 16px;
  --space-lg: 20px;
  --space-xl: 24px;
  --space-2xl: 32px;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;

  --ease-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 0.15s;
  --duration-base: 0.25s;
  --duration-slow: 0.4s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #3EB5B0;
    --primary-light: #5CC9C4;
    --primary-dark: #2F9A96;
    --primary-muted: rgba(62, 181, 176, 0.16);
    --primary-gradient: linear-gradient(135deg, #2F9A96 0%, #3EB5B0 55%, #5CC9C4 100%);

    --water: #3EB5B0;
    --water-light: #5CC9C4;
    --water-muted: rgba(62, 181, 176, 0.16);

    --accent: #D8BE7E;
    --accent-light: #EAD4A0;
    --accent-dark: #C9A86C;
    --accent-muted: rgba(216, 190, 126, 0.20);
    --accent-gradient: linear-gradient(135deg, #C9A86C 0%, #D8BE7E 50%, #EAD4A0 100%);

    --cta-gradient: var(--accent-gradient);
    --cta-ink: #1A1510;
    --cta-ink-soft: rgba(26, 21, 16, 0.62);
    --cta-on-soft: rgba(26, 21, 16, 0.10);
    --cta-shadow: 0 6px 22px rgba(201, 168, 108, 0.32);

    --success: #3CB895;
    --info: #3EB5B0;
    --warning: #D8BE7E;
    --error: #E07878;

    /* 暖墨底 */
    --bg: #121410;
    --card-bg: rgba(255, 255, 255, 0.05);
    --card-bg-solid: #1A1F1C;
    --bg-tertiary: #1A201C;

    --text-primary: #F0F5F4;
    --text-secondary: #A3B0AE;
    --text-muted: #6E7C7A;
    --text-tertiary: #8B9896;

    --border: rgba(62, 181, 176, 0.14);
    --divider: #2A322C;
    --border-light: rgba(255, 255, 255, 0.04);

    --skeleton-base: rgba(255, 255, 255, 0.07);
    --skeleton-shine: rgba(255, 255, 255, 0.03);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 26px rgba(0, 0, 0, 0.48);
    --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.52);
    --shadow-glow: 0 0 36px rgba(62, 181, 176, 0.14);
  }
}