/* * FFXIV TW Tools - Design Tokens * 跨工具共用設計系統色票 / spacing / radius / shadow * * 引用方式： * * * 主題：dark only（2026-05-11 移除日夜模式切換） */ :root { /* Color (dark 預設) */ --color-bg: #1a1f2e; --color-surface: #232a3d; --color-surface-hover: #2b3450; --color-text: #f5f5f5; --color-text-muted: #9aa3b8; --color-accent: #e6c068; --color-accent-soft: rgba(230, 192, 104, 0.15); --color-border: #2f3650; /* === 雙 accent 並列（工具可 override --color-accent） === */ --color-accent-gold: #e6c068; --color-accent-gold-soft: rgba(230, 192, 104, 0.18); --color-accent-gold-hover: #f0d080; --color-accent-cyan: #4ec9d0; --color-accent-cyan-soft: rgba(78, 201, 208, 0.18); --color-accent-cyan-hover: #5dd1d8; /* === 狀態色（warn / danger / success） === */ --color-warn: #e8a45a; --color-warn-soft: rgba(232, 164, 90, 0.18); --color-warn-strong: #c87a2a; --color-danger: #e57373; --color-danger-soft: rgba(229, 115, 115, 0.18); --color-danger-strong: #b71c1c; --color-success: #7dd87d; --color-success-soft: rgba(125, 216, 125, 0.18); --color-success-strong: #1b5e20; /* === 次強調色（gold，用於 island-workshop 高人氣等） === */ --color-gold: #ffd166; --color-gold-soft: rgba(255, 209, 102, 0.18); /* === code / monospace 文字色 === */ --color-code: #b5cea8; /* === 人氣 4 tier 配色（island-workshop 用） === */ --color-pop-low: #6b7280; --color-pop-normal: #4a90e2; --color-pop-high: #7dd87d; --color-pop-very-high: #ffd166; /* === 幻巧拼圖寶物色（faux-hollows 用，獨立識別） === */ --color-faux-empty: #c6aa8c; /* 淺奶茶 */ --color-faux-sword: #7d90a6; /* 藍灰 */ --color-faux-chest: #b97b7d; /* 粉棕 */ --color-faux-fox: #ccc17d; /* 淡黃綠 */ --color-faux-obstacle: #6b5d4a; /* 暖灰棕 */ /* Font — 中文 fallback 一律黑體優先（微軟正黑/PingFang/Noto Sans TC），絕不掉到宋體系列 */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", Roboto, "Helvetica Neue", Arial, sans-serif; /* Spacing */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-8: 3rem; /* Radius */ --radius-sm: 6px; --radius-pill: 999px; --radius-card: 12px; /* Shadow */ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.25); --shadow-card-hover: 0 8px 20px rgba(0, 0, 0, 0.4); /* Misc */ --transition-fast: 0.15s ease; --transition-slow: 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); /* ============================================================ * 🪙 FFXIV Codex Design Tokens (2026-05-11) * 主題：暗金科技魔法質感（Dawntrail / Endwalker 世代） * 任何子工具引用以下 token 後可立即套用「水晶都會古卷」風格 * ============================================================ */ /* —— 深層底色：比 --color-bg 更深，給 codex/法陣 質感 —— */ --color-bg-deep: #0a0e18; --color-bg-mid: #131826; --color-ink: #d6cfb8; /* 古卷羊皮紙墨字色 */ /* —— Display 字 stack：拉丁 serif（Trajan/Cinzel/Cambria）+ 中文一律黑體 —— */ /* 中文 codex 感不靠宋體（顯示效果差），改靠黑體粗 weight + tracking 達到 */ --font-display: "Trajan Pro", "Cinzel", "Cambria", "Palatino Linotype", "Palatino", "Hoefler Text", "Times New Roman", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", serif; /* —— Mono stack：英文 mono + 中文黑體 fallback（避免掉系統 default 宋體）—— */ --font-mono: ui-monospace, "JetBrains Mono", "Consolas", "Menlo", "Courier New", "Microsoft JhengHei", "微軟正黑體", "PingFang TC", "Noto Sans TC", monospace; /* —— 字距 token（display 大標題用）—— */ --tracking-wide: 0.16em; --tracking-wider: 0.32em; /* —— 圖層化背景 gradient（4 工具共用 body bg 公式）—— */ --gradient-body: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(230, 192, 104, 0.04), transparent 70%), radial-gradient(ellipse 40% 30% at 50% 100%, rgba(78, 201, 208, 0.03), transparent 80%), linear-gradient(180deg, #0a0e18 0%, #131826 50%, #0a0e18 100%); --gradient-hero: radial-gradient(ellipse 50% 60% at 50% 30%, rgba(230, 192, 104, 0.10), transparent 70%); --gradient-tablet: linear-gradient(180deg, rgba(35, 42, 61, 0.92) 0%, rgba(19, 24, 38, 0.95) 100%); /* —— SVG pattern overlay：細微鑽石格紋（古卷壓印感）—— */ --pattern-overlay: url("data:image/svg+xml;utf8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23e6c068' stroke-width='0.3' stroke-opacity='0.08'%3E%3Cpath d='M0 20L20 0L40 20L20 40Z'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='0.6' fill='%23e6c068' fill-opacity='0.15'/%3E%3C/svg%3E"); /* —— Cyberpunk CRT scanline 細線（與古卷感疊合 = Allagan 科技古文明）—— */ --pattern-scanline: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, rgba(78, 201, 208, 0.06) 2px, rgba(78, 201, 208, 0.06) 3px ); /* —— Neon 高亮（hover / pulse 用，比 accent 更亮）—— */ --color-neon-cyan: #7df9ff; --color-neon-magenta: #ff5ed4; /* —— 金線飾邊（hr / 卡片頂條 / 標題側翼）—— */ --line-gilt: linear-gradient(90deg, transparent 0%, rgba(230, 192, 104, 0.55) 20%, rgba(240, 208, 128, 0.9) 50%, rgba(230, 192, 104, 0.55) 80%, transparent 100%); --line-gilt-cyan: linear-gradient(90deg, transparent 0%, rgba(78, 201, 208, 0.55) 20%, rgba(93, 209, 216, 0.9) 50%, rgba(78, 201, 208, 0.55) 80%, transparent 100%); /* —— 神秘陰影（卡片 / 面板用，內外光多層次）—— */ --shadow-mystical: inset 0 1px 0 rgba(230, 192, 104, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 12px 28px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4); --shadow-mystical-cyan: inset 0 1px 0 rgba(78, 201, 208, 0.10), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(78, 201, 208, 0.12), 0 0 32px rgba(78, 201, 208, 0.10), 0 12px 28px rgba(0, 0, 0, 0.55); --shadow-mystical-gold: inset 0 1px 0 rgba(230, 192, 104, 0.14), inset 0 -1px 0 rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(230, 192, 104, 0.18), 0 0 40px rgba(230, 192, 104, 0.10), 0 12px 28px rgba(0, 0, 0, 0.55); /* —— 切角剪輯（FFXIV 標誌性 8-sided 斜切角面板）—— */ --notch-sm: 8px; --notch-md: 14px; --notch-lg: 22px; --clip-tablet: polygon( var(--notch-md) 0, calc(100% - var(--notch-md)) 0, 100% var(--notch-md), 100% calc(100% - var(--notch-md)), calc(100% - var(--notch-md)) 100%, var(--notch-md) 100%, 0 calc(100% - var(--notch-md)), 0 var(--notch-md) ); }