thread-master/apps/web/src/styles/tokens.css

/**
 * 巡樓 · Lapras — Harbor Desk UI
 * 色：teal mint primary / soft cyan secondary / coral accent
 * （Pokémon Palette 衍生）
 * 字體：Inter + Taipei Sans TC（保留）
 */

:root {
  color-scheme: light;

  /* Brand source tokens */
  --pp-primary: #20b49c;
  --pp-secondary: #69d4c5;
  --pp-ring: #22c3a8;
  --pp-fg: #152825;
  --pp-accent: #ff7b73;

  --hb-bg: #fcfdfd;
  --hb-surface: rgba(255, 255, 255, 0.9);
  --hb-surface-solid: #ffffff;
  --hb-surface-muted: #f2f7f7;
  --hb-ink: #152825;
  --hb-text: #152825;
  --hb-fg: #152825;
  --hb-ink-secondary: #2a403c;
  --hb-muted: #62847f;
  --hb-subtle: #7a9a95;
  --hb-line: color-mix(in srgb, #e0ebe9 88%, transparent);
  --hb-line-strong: #e0ebe9;

  --hb-brand: #20b49c;
  --hb-brand-hover: #1a9a86;
  --hb-brand-soft: color-mix(in srgb, #20b49c 13%, #ffffff);
  --hb-brand-on: #ffffff;
  --hb-brand-deep: #178f7d;
  --hb-magic: #69d4c5;
  --hb-magic-glow: rgb(32 180 156 / 0.28);
  --hb-focus: color-mix(in srgb, #22c3a8 78%, #69d4c5);

  --hb-success: #117d70;
  --hb-success-soft: #e7f7f4;
  --hb-danger: #ef4444;
  --hb-danger-soft: #fcecef;
  --hb-warning: #9a7117;
  --hb-warning-soft: #faf3df;
  --hb-accent-warm: #ff7b73;

  --hb-fun-mint: #20b49c;
  --hb-fun-mint-soft: #e7f8f5;
  --hb-fun-sky: #69d4c5;
  --hb-fun-sky-soft: #e8faf7;
  --hb-fun-coral: #ff7b73;
  --hb-fun-coral-soft: #fff0ed;
  --hb-fun-peach: #e8a878;
  --hb-fun-peach-soft: #fef6e8;
  --hb-fun-lavender: #3aa89a;
  --hb-fun-lavender-soft: #e8f6f3;
  --hb-fun-gold: #d19b34;
  --hb-fun-gold-soft: #fbf4e5;

  --hb-radius-sm: 0.55rem;
  --hb-radius: 0.8rem;
  --hb-radius-lg: 1rem;
  --hb-radius-xl: 1.15rem;
  --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(21 40 37 / 0.04),
    0 9px 28px rgb(32 180 156 / 0.1);
  --hb-shadow-soft: 0 4px 18px var(--hb-magic-glow);
  --hb-shadow-float: 0 16px 48px rgb(21 40 37 / 0.12);
  --hb-shadow-glow: 0 0 24px rgb(34 195 168 / 0.3);

  --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.875rem; /* 14px · 按鈕／輔助 */
  --hb-text-base: 1rem; /* 16px · 內文 */
  --hb-text-lg: 1.125rem; /* 18px · 卡片標題 */
  --hb-text-xl: 1.375rem; /* 22px · 頁標題 */
  --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.625rem; /* 同列按鈕、chip */
  --hb-gap-stack: 0.8rem; /* 表單欄位、stack 預設 */
  --hb-gap-block: 1.05rem; /* 卡片內大段 */
  --hb-gap-section: 1.3rem; /* 頁面區塊與區塊 */
  --hb-gap-page: 1.75rem; /* 頁面上下大留白（桌面） */

  --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, #20b49c 16%, transparent);
  --hb-aurora-2: color-mix(in srgb, #69d4c5 12%, transparent);
  --hb-aurora-3: color-mix(in srgb, #ff7b73 8%, transparent);
}

/**
 * Dark：深海綠畫布，mint 主色與 coral 點綴。
 */
[data-theme="dark"] {
  color-scheme: dark;

  --hb-bg: #141a19;
  --hb-surface: rgba(27, 39, 37, 0.9);
  --hb-surface-solid: #1b2725;
  --hb-surface-muted: #253735;
  --hb-ink: #f4f6f5;
  --hb-text: #f4f6f5;
  --hb-fg: #f4f6f5;
  --hb-ink-secondary: #d0dcd9;
  --hb-muted: #98b3b0;
  --hb-subtle: #7a9592;
  --hb-line: color-mix(in srgb, #2d4340 92%, transparent);
  --hb-line-strong: #2d4340;

  --hb-brand: #3cddc2;
  --hb-brand-hover: #55e5cd;
  --hb-brand-soft: color-mix(in srgb, #3cddc2 14%, #1b2725);
  --hb-brand-on: #0a0a0a;
  --hb-brand-deep: #69e8d5;
  --hb-magic: #69d3c5;
  --hb-magic-glow: rgb(60 221 194 / 0.32);
  --hb-focus: color-mix(in srgb, #3cddc2 78%, #69d3c5);

  --hb-danger: #dc2626;
  --hb-danger-soft: #341919;
  --hb-success: #3cddc2;
  --hb-success-soft: #142a2b;
  --hb-warning: #e0c060;
  --hb-warning-soft: #2a2414;
  --hb-accent-warm: #ff7c75;

  --hb-fun-mint: #3cddc2;
  --hb-fun-mint-soft: #172b2c;
  --hb-fun-sky: #69d3c5;
  --hb-fun-sky-soft: #1b2b31;
  --hb-fun-coral: #ff7c75;
  --hb-fun-coral-soft: #342020;
  --hb-fun-peach: #e8c890;
  --hb-fun-peach-soft: #2a2418;
  --hb-fun-lavender: #69d3c5;
  --hb-fun-lavender-soft: #1e2f2d;
  --hb-fun-gold: #e0c060;
  --hb-fun-gold-soft: #2a2418;

  --hb-shadow-card:
    0 0 0 1px color-mix(in srgb, #2d4340 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(60 221 194 / 0.28);

  --hb-aurora-1: color-mix(in srgb, #3cddc2 12%, transparent);
  --hb-aurora-2: color-mix(in srgb, #69d3c5 8%, transparent);
  --hb-aurora-3: color-mix(in srgb, #ff7c75 5%, transparent);
}