/** * Design tokens — 正隆 × Editorial（Design in Taiwan moodboard） * 紙白底 · 細雜訊 · 細線網格 · 郵局紅 + 墨黑高對比 */ :root { /* 磚紅 — Primary（Tab、連結、focus、CTA、導覽 active） */ --color-primary: #df2f2f; --color-primary-hover: #c42828; --color-primary-pressed: #a82222; --color-primary-subtle: rgba(223, 47, 47, 0.08); --color-primary-emphasis: #a82222; --color-primary-gradient-from: #a82222; --color-primary-gradient-to: #df2f2f; /* CTA 別名（向後相容） */ --color-cta: var(--color-primary); --color-cta-hover: var(--color-primary-hover); --color-cta-pressed: var(--color-primary-pressed); --color-cta-subtle: var(--color-primary-subtle); --color-cta-glow: rgba(223, 47, 47, 0.15); /* 永續語意 — 僅明確引用（success badge 等），不作 UI primary 自動套用 */ --color-sustain: #2d5a42; --color-sustain-subtle: #eef3ef; --color-sustain-emphasis: #1a3328; --color-kraft: #b8956a; --color-kraft-hover: #a08258; --color-kraft-subtle: #f5f0e8; --color-kraft-muted: #e8e0d4; --color-kraft-deep: #8a7355; /* 牛皮紙 — 輔助、圖表 */ --color-ink: #111111; --color-ink-muted: #444444; /* Surfaces — 刊物灰（示意圖 #F2 / #EAE） */ --color-bg-default: #ffffff; --color-bg-subtle: #f2f2f2; --color-bg-muted: #eaeaea; --color-bg-elevated: #f7f7f7; --color-sidebar: #f7f7f7; --color-sidebar-border: rgba(17, 17, 17, 0.08); --color-content: #fafaf8; /* Text */ --color-text-primary: var(--color-ink); --color-text-secondary: #757575; --color-text-tertiary: #aeaeae; --color-text-muted: #aeaeae; --color-text-on-brand: #fafaf8; --color-text-link: var(--color-primary); /* Border & ring — 細線 */ --color-border-default: rgba(17, 17, 17, 0.08); --color-border-strong: rgba(17, 17, 17, 0.14); --color-border-hairline: rgba(17, 17, 17, 0.06); --color-ring: var(--color-ink); /* Grid（圖表／表格用） */ --color-grid-line: #e8e8e8; /* Status */ --color-success: var(--color-sustain); --color-success-subtle: var(--color-sustain-subtle); --color-warning: #9a6b1f; --color-warning-subtle: #faf3e6; --color-error: var(--color-cta); --color-error-subtle: #fdeeee; --color-info: #4a6d7a; --color-info-subtle: #eef4f6; /* Chart — 細線、少填色 */ --chart-total: var(--color-primary); --chart-black-paper: var(--color-ink); --chart-white-paper: #757575; --chart-accent: var(--color-cta); /* 圖表系列 — 由 primary 衍生（儀表板統一色票） */ --chart-red-base: var(--color-primary); --chart-red-strong: var(--color-primary-pressed); --chart-red-soft: color-mix(in srgb, var(--color-primary) 30%, white); --chart-paper-home: var(--color-kraft-muted); --chart-paper-ind: var(--color-primary); --chart-area-fill-opacity: 0.14; /* 各行業 — 紅＋黑＋灰階（刊物圖表感） */ --chart-industry-1: var(--chart-red-base); --chart-industry-2: #111111; --chart-industry-3: #666666; --chart-industry-4: #aaaaaa; --chart-industry-5: #cccccc; --chart-heatmap-0: #e8e8e8; --chart-heatmap-1: color-mix(in srgb, var(--color-primary) 12%, white); --chart-heatmap-2: color-mix(in srgb, var(--color-primary) 32%, white); --chart-heatmap-3: color-mix(in srgb, var(--color-primary) 58%, white); --chart-heatmap-4: var(--color-primary); /* 細緻紙質雜訊（高頻、印刷 grain） */ --texture-noise-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.18' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --texture-noise: var(--texture-noise-fine); /* CTA 帶 — 刊物細線網格（疊在照片 scrim 上） */ --texture-cta-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1' d='M0 32V0h32'/%3E%3C/svg%3E"); /* Spacing */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 48px; --space-9: 64px; /** 首頁中段區塊（關於／流程／環景）上下留白：有呼吸感但不至於空 */ --pub-mid-section-pad-y: clamp(56px, 6vw, 80px); /* Typography — Inter + 刊物字距 */ --font-family: 'Inter', 'Helvetica Neue', 'Arial', ui-sans-serif, system-ui, sans-serif; --font-display: 36px; --font-h1: 28px; --font-h2: 20px; --font-h3: 15px; --font-body: 14px; /** 後台 widget 卡片標題（與 .dash-widget__title 同級，固定 18px） */ --font-widget-title: 18px; /** 可讀次級文字／列標籤（KPI 項、表單輔助說明）— 不得降為 caption */ --font-ui-small: 14px; /** 詳情頁卡片內文最小字級 */ --font-ui: 16px; /** 詳情頁數據值 — 同近期預約時間 */ --font-detail-data: 20px; --font-heading-sm: 20px; --font-caption: 12px; --letter-spacing-tight: -0.02em; --letter-spacing-caps: 0.06em; --line-height-body: 1.5; --line-height-heading: 1.2; /* Radius — 示意圖 8–12px，非大圓角 */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-widget: 12px; --radius-full: 9999px; /* Shadow — 極輕，靠邊框＋雜訊定調 */ --shadow-xs: 0 1px 2px rgba(17, 17, 17, 0.04); --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.05); --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.07); --shadow-lg: 0 16px 40px rgba(17, 17, 17, 0.08); --shadow-widget: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 1px 3px rgba(17, 17, 17, 0.04); --shadow-widget-hover: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 12px 32px rgba(17, 17, 17, 0.12), 0 4px 12px rgba(17, 17, 17, 0.08); /* Layout */ --sidebar-width: 248px; --sidebar-collapsed-width: 72px; --app-shell-header-height: 56px; --public-header-top-height: 62px; --public-header-nav-height: 0px; --public-header-height: var(--public-header-top-height); --book-card-padding-x: var(--space-6); --book-card-padding-y: var(--space-7); --toast-gap-below-header: var(--space-4); --toast-top-app: calc(var(--app-shell-header-height) + var(--toast-gap-below-header)); --toast-top-public: calc(var(--public-header-height) + var(--toast-gap-below-header)); --content-max-width: 1400px; --dash-grid-columns: 12; --dash-grid-gap: var(--space-5); /** 儀表板右欄環圖／圓餅圖（198px × 0.8） */ --dash-donut-size-compact: 158px; /* Motion */ --duration-fast: 150ms; --duration-base: 220ms; --duration-slow: 300ms; --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Z-index — app shell: body < footer < header < sidebar < user-menu */ --z-shell-body: 1; --z-shell-footer: 2; --z-shell-header: 3; --z-shell-sidebar: 4; --z-user-menu: 5; --z-public-header: 100; --z-sticky: var(--z-shell-header); --z-dropdown: 1000; --z-drawer: 1100; --z-modal: 1200; --z-toast: 1300; --z-grain: 1; }