172 lines
5.0 KiB
CSS
172 lines
5.0 KiB
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);
|
||
}
|