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

/**
 * 巡樓 · Lapras — Harbor Desk UI
 * 色：pale blue 主色 / cream 次色 / burnt orange 點綴（Pokémon Palette）
 * 字體：Inter + Taipei Sans TC
 *
 * 唯一真相：顏色、字級、間距只在這個檔案定義。其他 css 與 tsx 一律吃 var()，
 * 不寫死色碼與 font-size —— 否則深淺模式會有一半的畫面不跟著切。
 * 由 `npm run check:tokens` 把關。
 *
 * 命名規則：
 *   X        當填色、底色、邊框
 *   X-on     疊在 X 底色上的文字
 *   X-soft   hover／淡底
 *   X-deep   把該色「當文字」放在頁面或卡片底色上的深一階；只有本身對比不足的
 *            顏色才有（brand / danger / warning），success 自己就過 AA。
 * 主色是淺藍，當文字只有 1.9:1，所以主色當文字一律走 --hb-brand-deep。
 * --hb-subtle 只有 3.8:1，僅供裝飾與 18px 以上大字，勿用於內文。
 *
 * 兩條防髒規則：
 * 1. 不要把兩個「有彩度」的顏色互相 color-mix。藍(H≈187)配橘(H≈32)是補色，
 *    混出來一定是濁褐；要調淡就跟 surface／line／transparent 混。要一深一淺的
 *    同一顏色就用 X 與 X-deep。
 * 2. 中性色（bg / surface / line / muted / subtle）全部維持 H≈180-191 的冷青，
 *    跟 ink 與主色同溫。palette 原本的 muted 是 H=44 的暖褐，疊在偏冷的白底上
 *    會整片發黃發濁。暖色只出現在刻意的強調上：warning、accent、方案金標。
 */

:root {
  color-scheme: light;

  --hb-bg: #fcfdfd;
  --hb-surface: rgba(255, 255, 255, 0.9);
  --hb-surface-solid: #ffffff;
  --hb-surface-muted: #f2f6f6;
  --hb-ink: #152628;
  --hb-text: #152628;
  --hb-fg: #152628;
  --hb-ink-secondary: #33474a;
  --hb-muted: #566869; /* 5.8:1 於 bg、5.4:1 於 surface-muted */
  --hb-subtle: #748687; /* 3.8:1 — 裝飾／大字限定 */
  --hb-line: color-mix(in srgb, #e0e9eb 88%, transparent);
  --hb-line-strong: #e0e9eb;
  --hb-scrim: rgb(21 38 40 / 0.55);

  --hb-brand: #8bc5cd;
  --hb-brand-hover: #76b8c1;
  --hb-brand-soft: color-mix(in srgb, #8bc5cd 20%, #ffffff);
  --hb-brand-on: #0a0a0a; /* 10.3:1 於 brand */
  --hb-brand-deep: #2d5f66; /* 7.0:1 於 bg，主色當文字時用 */
  --hb-magic: #fee5a1; /* 次色奶油黃：只當淡底與裝飾 */
  --hb-magic-glow: rgb(139 197 205 / 0.2);
  --hb-focus: #2d5f66;

  --hb-success: #2f7d3f; /* 純綠 H=135，與 brand-deep 的青藍明顯分開 */
  --hb-success-soft: #eaf4ec;
  --hb-success-on: #ffffff; /* 5.2:1 */
  --hb-danger: #ef4444;
  --hb-danger-soft: #fdecec;
  --hb-danger-on: #0a0a0a; /* 5.3:1；白字只有 3.8:1 */
  --hb-danger-deep: #c0392b; /* 5.3:1 於 bg */
  --hb-warning: #b96b1c;
  --hb-warning-soft: #fbf1e3;
  --hb-warning-on: #0a0a0a; /* 4.9:1；白字只有 4.1:1 */
  --hb-warning-deep: #a35d16; /* 5.1:1 於白卡 */
  --hb-accent-warm: #b96b1c; /* 與 warning 同色：palette 只有這一個暖點綴 */

  /* 畫布極光：主色的暗一階，只用來鋪背景 */
  --hb-brand-dim: #6f9ba3;
  --hb-aurora-1: color-mix(in srgb, #8bc5cd 20%, transparent);
  --hb-aurora-2: color-mix(in srgb, #8bc5cd 11%, transparent);
  --hb-aurora-3: color-mix(in srgb, #6f9ba3 12%, transparent);

  /* 付費方案的金色字光（裝飾用，不當文字色） */
  --hb-gold: #d9a531;
  --hb-gold-bright: #fee5a1;

  --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 38 40 / 0.04),
    0 9px 28px rgb(21 38 40 / 0.06);
  --hb-shadow-soft: 0 4px 18px var(--hb-magic-glow);
  --hb-shadow-float: 0 16px 48px rgb(21 38 40 / 0.12);
  --hb-shadow-glow: 0 0 24px rgb(139 197 205 / 0.4);

  --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;
  --hb-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 字階只有這 7 級，之間沒有中間值 —— 0.8 / 0.82 / 0.85 併存看不出差別，
     只會讓整頁失去節奏。輸入框維持 16px 避免 iOS 聚焦時縮放。 */
  --hb-text-2xs: 0.75rem; /* 12px · badge／極小 meta */
  --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-2xl: 1.75rem; /* 28px · 登入／定價大標 */
  --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;
}

/**
 * Dark：冷灰藍畫布，暖褐色作為 muted 層（palette 的 --muted 就是暖色）。
 * 深底下亮色本身對比就夠，所以 -deep 反而是更亮的一階。
 */
[data-theme="dark"] {
  color-scheme: dark;

  --hb-bg: #141a1a;
  --hb-surface: rgba(27, 38, 39, 0.9);
  --hb-surface-solid: #1b2627;
  --hb-surface-muted: #243132;
  --hb-ink: #f4f6f6;
  --hb-text: #f4f6f6;
  --hb-fg: #f4f6f6;
  --hb-ink-secondary: #d3dcdc;
  --hb-muted: #a9b7b7; /* 8.5:1 */
  --hb-subtle: #8b9a9a; /* 6.0:1 */
  --hb-line: color-mix(in srgb, #2d4143 92%, transparent);
  --hb-line-strong: #2d4143;
  --hb-scrim: rgb(0 0 0 / 0.66);

  --hb-brand: #89c5cd;
  --hb-brand-hover: #a3d4da;
  --hb-brand-soft: color-mix(in srgb, #89c5cd 14%, #1b2627);
  --hb-brand-on: #0a0a0a; /* 10.3:1 */
  --hb-brand-deep: #b7e3e8;
  --hb-magic: #fee59f;
  --hb-magic-glow: rgb(137 197 205 / 0.18);
  --hb-focus: #89c5cd;

  --hb-success: #74d189; /* 9.4:1，純綠 */
  --hb-success-soft: #16251a;
  --hb-success-on: #0a0a0a;
  --hb-danger: #dc2626;
  --hb-danger-soft: #341919;
  --hb-danger-on: #ffffff; /* 4.8:1 —— 深底的紅維持白字 */
  --hb-danger-deep: #f87171; /* 5.6:1 於卡片；#ef4444 只有 4.1:1 */
  --hb-warning: #e18c37; /* 6.7:1 */
  --hb-warning-soft: #2f2416;
  --hb-warning-on: #0a0a0a;
  --hb-warning-deep: #e18c37; /* 深底不必再加深 */
  --hb-accent-warm: #e18c37;

  --hb-brand-dim: #7fb0b8;
  --hb-aurora-1: color-mix(in srgb, #89c5cd 14%, transparent);
  --hb-aurora-2: color-mix(in srgb, #89c5cd 7%, transparent);
  --hb-aurora-3: color-mix(in srgb, #7fb0b8 8%, transparent);

  --hb-gold: #e1b84f;
  --hb-gold-bright: #fee59f;

  --hb-shadow-card:
    0 0 0 1px color-mix(in srgb, #2d4143 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(137 197 205 / 0.28);
}