/**
 * 巡樓 · Lapras — Enchanted calm UI
 * 借鏡 Linear / Stripe / Raycast：安靜留白、單一 accent、玻璃層次
 * 魔法感：柔光 aurora、細星芒 icon、圓潤控件
 * 字體：Inter + Taipei Sans TC（保留）
 * 色：pokemonpalette 綠 #9ccd91 / #c1e47b
 */

:root {
  color-scheme: light;

  --pp-primary: #9ccd91;
  --pp-secondary: #c1e47b;
  --pp-ring: #90c884;
  --pp-fg: #192815;

  /* 空氣感底：極淡綠白 */
  --hb-bg: #f7faf6;
  --hb-surface: rgba(255, 255, 255, 0.82);
  --hb-surface-solid: #ffffff;
  --hb-surface-muted: #f0f5ec;
  --hb-ink: #192815;
  --hb-ink-secondary: #3d4a36;
  --hb-muted: #6f7d5f;
  --hb-subtle: #9aa888;
  --hb-line: color-mix(in srgb, #d5e4d2 88%, transparent);
  --hb-line-strong: #d5e4d2;

  --hb-brand: #9ccd91;
  --hb-brand-hover: #86c07c;
  --hb-brand-soft: color-mix(in srgb, #9ccd91 18%, #ffffff);
  --hb-brand-on: #0f1a0e;
  --hb-brand-deep: #4f8a48;
  --hb-magic: #c1e47b;
  --hb-magic-glow: rgb(156 205 145 / 0.45);

  --hb-success: #4f8a48;
  --hb-success-soft: #e6f4e3;
  --hb-danger: #e85d5d;
  --hb-danger-soft: #fef1f1;
  --hb-warning: #b8962e;
  --hb-warning-soft: #fbf6e4;
  --hb-accent-warm: #c1e47b;

  --hb-fun-mint: #9ccd91;
  --hb-fun-mint-soft: #eef7ec;
  --hb-fun-sky: #c1e47b;
  --hb-fun-sky-soft: #f4fadc;
  --hb-fun-coral: #f08a72;
  --hb-fun-coral-soft: #fdeee9;
  --hb-fun-peach: #e8c07a;
  --hb-fun-peach-soft: #fef6e8;
  --hb-fun-lavender: #a8b88a;
  --hb-fun-lavender-soft: #f0f3e8;
  --hb-fun-gold: #c1e47b;
  --hb-fun-gold-soft: #f4fadc;

  /* 更圓、更柔 */
  --hb-radius-sm: 0.7rem;
  --hb-radius: 1rem;
  --hb-radius-lg: 1.25rem;
  --hb-radius-xl: 1.6rem;
  --hb-radius-pill: 9999px;

  --hb-shadow-card:
    0 0 0 1px color-mix(in srgb, var(--hb-line-strong) 70%, transparent),
    0 1px 2px rgb(25 40 21 / 0.03),
    0 8px 28px rgb(156 205 145 / 0.1);
  --hb-shadow-soft: 0 4px 18px var(--hb-magic-glow);
  --hb-shadow-float: 0 16px 48px rgb(25 40 21 / 0.1);
  --hb-shadow-glow: 0 0 24px rgb(193 228 123 / 0.35);

  --hb-font-sans: "Inter", "Taipei Sans TC", system-ui, -apple-system, "Segoe UI",
    "Noto Sans TC", sans-serif;
  --hb-font-en: "Inter", system-ui, -apple-system, sans-serif;

  /* 字級：略放大，小螢幕也清楚（輸入框 ≥16px 避免 iOS 縮放） */
  --hb-text-xs: 0.8125rem; /* 13px · 次要 meta */
  --hb-text-sm: 0.9375rem; /* 15px · 按鈕／輔助 */
  --hb-text-base: 1.0625rem; /* 17px · 內文 */
  --hb-text-lg: 1.1875rem; /* 19px · 卡片標題 */
  --hb-text-xl: 1.5rem; /* 24px · 頁標題 */
  --hb-text-input: 1rem; /* 16px · 表單 */

  --hb-space-1: 0.25rem;
  --hb-space-2: 0.5rem;
  --hb-space-3: 0.75rem;
  --hb-space-4: 1rem;
  --hb-space-5: 1.25rem;
  --hb-space-6: 1.5rem;
  --hb-space-8: 2rem;
  --hb-space-10: 2.5rem;
  /* 天地：區塊／元件間固定呼吸距離（勿再擠） */
  --hb-gap-tight: 0.5rem; /* 列內小元件 */
  --hb-gap-inline: 0.75rem; /* 同列按鈕、chip */
  --hb-gap-stack: 1rem; /* 表單欄位、stack 預設 */
  --hb-gap-block: 1.35rem; /* 卡片內大段 */
  --hb-gap-section: 1.75rem; /* 頁面區塊與區塊 */
  --hb-gap-page: 2.25rem; /* 頁面上下大留白（桌面） */

  --hb-touch: 2.75rem;
  --hb-sidebar-width: 15rem;
  --hb-topbar-height: 3.6rem;
  --hb-dock-height: 3.85rem;

  /* 背景光暈 */
  --hb-aurora-1: color-mix(in srgb, #9ccd91 22%, transparent);
  --hb-aurora-2: color-mix(in srgb, #c1e47b 18%, transparent);
  --hb-aurora-3: color-mix(in srgb, #b8d4e8 12%, transparent);
}

/**
 * Dark：中性近黑底 + 高明度綠 accent（Raycast / Linear 策略）
 * 問題：整片偏綠 → brand 被「吃掉」、髒、對比差
 * 解法：底改炭灰／石墨，綠只當強調與光暈
 */
[data-theme="dark"] {
  color-scheme: dark;

  /* 中性畫布（幾乎無綠相） */
  --hb-bg: #0c0e0d;
  --hb-surface: rgba(22, 24, 23, 0.82);
  --hb-surface-solid: #161916;
  --hb-surface-muted: #1e211f;
  /* 偏冷的米白字，不是綠灰字 */
  --hb-ink: #f3f4f2;
  --hb-ink-secondary: #b8beb6;
  --hb-muted: #8b928a;
  --hb-subtle: #5f6660;
  --hb-line: color-mix(in srgb, #2c302d 92%, transparent);
  --hb-line-strong: #2c302d;

  /* 夜光綠：比淺色模式更亮、更飽和，才「浮」在暗底上 */
  --hb-brand: #a8e09c;
  --hb-brand-hover: #c0edb4;
  --hb-brand-soft: color-mix(in srgb, #a8e09c 12%, #161916);
  --hb-brand-on: #0a1009;
  --hb-brand-deep: #c8f0b8;
  --hb-magic: #d4f08a;
  --hb-magic-glow: rgb(168 224 156 / 0.32);

  --hb-danger: #ff7b7b;
  --hb-danger-soft: #2e1818;
  --hb-success: #a8e09c;
  --hb-success-soft: #152018;
  --hb-warning: #e0c060;
  --hb-warning-soft: #2a2414;
  --hb-accent-warm: #d4f08a;

  --hb-fun-mint: #a8e09c;
  --hb-fun-mint-soft: #1a2218;
  --hb-fun-sky: #d4f08a;
  --hb-fun-sky-soft: #222618;
  --hb-fun-coral: #f0a090;
  --hb-fun-coral-soft: #2e1c1a;
  --hb-fun-peach: #e8c890;
  --hb-fun-peach-soft: #2a2418;
  --hb-fun-lavender: #b0b8c8;
  --hb-fun-lavender-soft: #1c1e24;
  --hb-fun-gold: #d4f08a;
  --hb-fun-gold-soft: #222618;

  --hb-shadow-card:
    0 0 0 1px color-mix(in srgb, #2c302d 90%, transparent),
    0 10px 36px rgb(0 0 0 / 0.45);
  --hb-shadow-soft: 0 4px 22px var(--hb-magic-glow);
  --hb-shadow-float: 0 20px 56px rgb(0 0 0 / 0.55);
  --hb-shadow-glow: 0 0 32px rgb(168 224 156 / 0.28);

  /* 光暈極克制：一點綠 + 一點冷藍，避免「綠醬」 */
  --hb-aurora-1: color-mix(in srgb, #a8e09c 9%, transparent);
  --hb-aurora-2: color-mix(in srgb, #d4f08a 6%, transparent);
  --hb-aurora-3: color-mix(in srgb, #6a8098 7%, transparent);
}