/* ═══════════════════════════════════════════════════════════════════════════
* SWAG Design System v2 — Tokens
* 全站設計變數 single source of truth
*
* 引用方式：在所有 CSS 之前載入此檔
*
*
*
* 漸進式遷移：本檔保留 v1 token alias（--bg / --swag 等），
* 既有 CSS 不需大改，新元件請使用 v2 token。
* ═══════════════════════════════════════════════════════════════════════════ */
:root {
/* ── 1. COLOR — Brand & Semantic ─────────────────────────────────────────
* 主色：保留原 SWAG 綠，但加入「強度階梯」讓使用更精準
* ──────────────────────────────────────────────────────────────────────── */
--c-brand-50: #E5F8F5;
--c-brand-100: #C9F0EA;
--c-brand-300: #5FD4C4;
--c-brand: #2BC5B4; /* 原 --swag — 大色塊填色 */
--c-brand-700: #0F7B70; /* 原 --swag-dk — 文字級深綠（對 #FAF8F4 ~4.9:1，過 WCAG AA） */
--c-brand-900: #115F55;
--c-brand-bg: rgba(43,197,180,.08);
/* 中性色 — 暖白系（不是純灰，配合 SWAG 綠的暖調） */
--c-bg: #FAF8F4;
--c-surface: #FFFFFF;
--c-surface-2:#F4F1EB; /* 卡片巢狀內層 */
--c-line: #ECE8E0; /* 細分線 */
--c-line-2: #D8D2C6; /* 卡片邊框 */
--c-text: #1B1A17; /* 主文 */
--c-text-2: #4A4742; /* 副文 */
--c-muted: #5C5852; /* 弱化文字（對 #FFFFFF ~7.0:1，過 WCAG AAA） */
--c-faint: #C8C4BC; /* 最弱：placeholder、disabled */
/* 語意色 */
--c-success: #16A34A;
--c-warning: #E8865C; /* 暖橘 — 比紅色不刺眼，用於敏感警示 */
--c-error: #DC2626;
--c-info: #4DABF7;
/* 分類色（給話題分類等場景使用） */
--c-cat-cool: #4DABF7; /* 破冰、時事 */
--c-cat-warm: #FF6B6B; /* 升溫 */
--c-cat-spicy: #C026D3; /* 私密 */
--c-cat-emotion: #F472B6; /* 情感 */
--c-cat-meme: #FFD43B; /* 迷因 */
/* ── 2. SPACING — 8px baseline grid ──────────────────────────────────────
* 規則：所有 padding/margin/gap 只能用以下值
* ──────────────────────────────────────────────────────────────────────── */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 20px;
--s-6: 24px;
--s-7: 28px;
--s-8: 32px;
--s-10: 40px;
--s-12: 48px;
--s-16: 64px;
--s-20: 80px;
/* ── 3. TYPE — 7 階字級系統 ──────────────────────────────────────────────
* 規則：所有 font-size 只能用以下值
* ──────────────────────────────────────────────────────────────────────── */
--t-xs: 11px; /* 標籤、計數、meta */
--t-sm: 12.5px; /* 副文字、輔助說明 */
--t-base: 14px; /* 內文（body default） */
--t-md: 15.5px; /* 強調內文 */
--t-lg: 18px; /* 卡片標題 */
--t-xl: 22px; /* 區塊標題 */
--t-2xl: 28px; /* 頁面標題 */
--t-3xl: 36px; /* Hero（少用） */
/* Line height */
--lh-tight: 1.25; /* 標題 */
--lh-snug: 1.4; /* 副標 */
--lh-normal: 1.55; /* 內文 */
--lh-relaxed: 1.7; /* 大段落 */
/* Font weight */
--w-r: 400; /* regular */
--w-m: 500; /* medium */
--w-sb: 600; /* semibold */
--w-b: 700; /* bold */
--w-eb: 800; /* extrabold — 留給 hero/headline */
/* Letter spacing */
--ls-tight: -0.025em; /* 大標題 */
--ls-normal: 0;
--ls-wide: 0.04em; /* 小寫標籤 */
--ls-widest: 0.14em; /* 全大寫 eyebrow */
/* Font family */
--font-sans: 'Sora', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
/* ── 4. RADIUS — 5 階圓角 ────────────────────────────────────────────────
* ──────────────────────────────────────────────────────────────────────── */
--r-xs: 6px;
--r-sm: 8px;
--r: 10px;
--r-md: 12px;
--r-lg: 16px;
--r-xl: 20px;
--r-full: 9999px; /* pill */
/* ── 5. SHADOW — 3 階陰影 ────────────────────────────────────────────────
* ──────────────────────────────────────────────────────────────────────── */
--sh-1: 0 1px 2px rgba(20,18,15,.04), 0 4px 14px rgba(20,18,15,.05);
--sh-2: 0 6px 18px rgba(20,18,15,.07), 0 2px 6px rgba(20,18,15,.04);
--sh-3: 0 10px 28px rgba(20,18,15,.10), 0 4px 12px rgba(20,18,15,.06);
/* ── 6. MOTION — 統一 timing & easing ────────────────────────────────────
* ──────────────────────────────────────────────────────────────────────── */
--dur-fast: 120ms; /* hover、color shift */
--dur-base: 200ms; /* 標準 transition */
--dur-slow: 300ms; /* expand/collapse */
--dur-page: 500ms; /* page-level */
--ease: cubic-bezier(.4, 0, .2, 1); /* 通用 */
--ease-out: cubic-bezier(0, 0, .2, 1); /* 進場 */
--ease-in: cubic-bezier(.4, 0, 1, 1); /* 出場 */
--ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* 彈性 — 用於提示動畫 */
/* ── 7. Z-INDEX — 語意化分層 ─────────────────────────────────────────────
* ──────────────────────────────────────────────────────────────────────── */
--z-base: 1;
--z-sticky: 50; /* sticky tabs、sticky search */
--z-nav: 100; /* top nav */
--z-quick-hub: 120; /* floating action button */
--z-dropdown: 500;
--z-modal: 1000; /* drawers、bottom sheets */
--z-toast: 9000; /* 通知 — 永遠最上層 */
/* ── 8. LAYOUT ───────────────────────────────────────────────────────────
* ──────────────────────────────────────────────────────────────────────── */
--bp-sm: 480px;
--bp-md: 768px;
--bp-lg: 1040px;
--bp-xl: 1280px;
--container-narrow: 720px;
--container: 1040px;
--container-wide: 1280px;
--control-h: 44px; /* 主按鈕、輸入框 — touch-friendly */
--control-h-sm: 36px; /* 次要按鈕 */
--control-h-xs: 28px; /* 標籤、徽章 */
/* ── 9. FOCUS — 無障礙 ───────────────────────────────────────────────────
* ──────────────────────────────────────────────────────────────────────── */
--focus-ring: 0 0 0 3px var(--c-brand-bg);
--focus-ring-strong: 0 0 0 3px color-mix(in srgb, var(--c-brand) 35%, transparent);
/* ═══════════════════════════════════════════════════════════════════════
* v1 ALIAS — 漸進式遷移：保留舊變數名指向新 token
* 既有 CSS 不需要大改，新 component 請用 --c-* / --s-* / --t-*
* ═══════════════════════════════════════════════════════════════════════ */
--bg: var(--c-bg);
--surface: var(--c-surface);
--line: var(--c-line);
--line2: var(--c-line-2);
--text: var(--c-text);
--mid: var(--c-text-2);
--muted: var(--c-muted);
--faint: var(--c-faint);
--swag: var(--c-brand);
--swag-dk: var(--c-brand-700);
--swag-bg: var(--c-brand-bg);
--gold: #B8860B;
--gold-bg: rgba(184,134,11,0.08);
--error: var(--c-error);
--success: var(--c-success);
--warning: var(--c-warning);
--shadow: var(--sh-1);
--shadow-2: var(--sh-2);
--focus: var(--focus-ring);
}
/* ═══════════════════════════════════════════════════════════════════════════
* DARK MODE — 自動偵測系統偏好
* 所有 component 不用改，token 自動切換
* ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root {
--c-bg: #14120E;
--c-surface: #1F1C16;
--c-surface-2: #2A2620;
--c-line: #2F2B24;
--c-line-2: #3F3A31;
--c-text: #F4F1EB;
--c-text-2: #B8B2A6;
--c-muted: #8A8479;
--c-faint: #5A554C;
--c-brand-bg: rgba(43,197,180,.14);
--sh-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.20);
--sh-2: 0 6px 18px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
--sh-3: 0 10px 28px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.30);
}
}
/* 強制 light/dark — 提供開關覆寫機制 */
:root[data-theme="light"] {
color-scheme: light;
}
:root[data-theme="dark"] {
color-scheme: dark;
--c-bg: #14120E;
--c-surface: #1F1C16;
--c-surface-2: #2A2620;
--c-line: #2F2B24;
--c-line-2: #3F3A31;
--c-text: #F4F1EB;
--c-text-2: #B8B2A6;
--c-muted: #8A8479;
--c-faint: #5A554C;
--c-brand-bg: rgba(43,197,180,.14);
--sh-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 14px rgba(0,0,0,.20);
--sh-2: 0 6px 18px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.25);
--sh-3: 0 10px 28px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.30);
}
/* ═══════════════════════════════════════════════════════════════════════════
* Reduced Motion — 尊重使用者偏好
* ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
:root {
--dur-fast: 1ms;
--dur-base: 1ms;
--dur-slow: 1ms;
--dur-page: 1ms;
}
*, *::before, *::after {
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}