/* FATE ATLAS — shared Theme tokens (single source of truth for every public page). Two palettes, both selected purely via : - Dark 墨綠金 (default, no attribute needed) - Ivory Gold Light () Page-specific stylesheets should reference these variables (--bg-main, --gold-primary, --tx1, --b1, etc.) instead of hardcoding hex/rgba values, so switching data-theme re-themes them for free. Do not redeclare these tokens per page. */ :root { /* 墨綠金 Theme — background hierarchy: deepest(頁底) < main < secondary(大區塊) < surface-1(card) < surface-2 < surface-hover(raised/active) */ --bg-deepest:#06130F; --bg-main:#091C16; --bg-secondary:#0D261E; --surface-1:#102D23; --surface-2:#13332A; --surface-hover:#15382B; --gold-dark:#80652F; --gold-primary:#B9954F; --gold-light:#D7B96D; --gold-highlight:#E7CF8A; --gold-muted:rgba(185,149,79,.18); --gold-rgb:185,149,79; /* for rgba(var(--gold-rgb),alpha) tints where a fixed --gold-muted alpha doesn't fit */ --text-primary:#EEE8D8; --text-secondary:#B8B4A7; --text-muted:#817F76; --border-soft:rgba(185,149,79,.20); --border-gold:rgba(185,149,79,.38); --success:#7FB894; --warning:#D9A15C; --danger:#C97B72; /* 舊元件相容別名：只換視覺，不碰排盤與資料綁定。 */ --bg0:var(--bg-main); --bg1:var(--surface-1); --bg2:var(--surface-2); --bg3:var(--surface-hover); --tx0:var(--text-primary); --tx1:var(--text-secondary); --tx2:#A19D8F; --tx3:var(--text-muted); --gold:var(--gold-primary); --gold2:var(--gold-light); --gold3:var(--gold-highlight); --gold4:#F0E1B0; --b0:rgba(185,149,79,.10); --b1:var(--border-soft); --b2:var(--border-gold); --r:14px; --r2:20px; --serif:'Noto Serif TC','Songti TC',serif; --sans:'Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif; --mono:'Space Grotesk','Noto Sans TC',sans-serif; /* San Fang Si Zheng four-transformation color language: identical in every theme, never swapped for decoration. */ --mutagen-lu:#8FDCAE; --mutagen-quan:#E0A64C; --mutagen-ke:#8FC6E0; --mutagen-ji:#E2948B; } /* ============================================================================ FATE ATLAS — Ivory Gold Light Theme Toggle with . Omit the attribute (or set data-theme="dark") to keep the Dark Theme byte-for-byte unchanged — every rule below only ever applies under the [data-theme="ivory"] selector. ============================================================================ */ :root[data-theme="ivory"]{ /* Fixed presentation palette — the only hex values allowed anywhere in this theme (plus their rgba() tints). No self-derived hue: no rose gold, pink, terracotta, copper red, navy or blue-grey. Camel/caramel are accent-only (CTA/active/emphasis/thin lines/graphics) and never a section/card fill; every surface below is CARD, WARM_IVORY or SAND. */ --fa-bg:#F3EEE5; /* PAGE_BG */ --fa-surface:#FFFDF9; /* CARD */ --fa-surface-alt:#FAF7F1; /* WARM_IVORY */ --fa-bg-soft:#E5D8C7; /* SAND */ --fa-layer:#CDBBA5; /* STONE_BEIGE — non-surface layering only (hover depth, dividers) */ --fa-text:#2C211B; /* ESPRESSO */ --fa-text-secondary:#62554A; /* BODY_TEXT */ --fa-text-muted:#8C7D70; /* MUTED_TAUPE */ --fa-gold:#B58A5A; /* CAMEL */ --fa-gold-strong:#9A6A3A; /* CARAMEL */ --fa-gold-soft:#CDBBA5; /* STONE_BEIGE, reused as the softened accent tone */ --fa-border:#D8CABB; /* BORDER */ --fa-deep-brown:#5A4030; /* DEEP_BROWN — Level 1 heading alt, no opacity */ --fa-deep-gold:#8A5A2B; /* DEEP_GOLD — Level 2 emphasis: important stars, active state, selected border, relation lines */ --fa-gold-highlight:#B8873F; /* GOLD_HIGHLIGHT — brighter Level 2 accent where DEEP_GOLD reads too quiet */ --fa-dark:#2C211B; --fa-dark-surface:#FFFDF9; /* Remap the site's existing semantic tokens so every component already written with var(--tx1)/var(--gold2)/var(--bg1)/etc re-themes for free. */ --bg-main:var(--fa-bg); --bg-secondary:var(--fa-surface-alt); --surface-1:var(--fa-surface); --surface-2:var(--fa-surface-alt); --surface-hover:var(--fa-layer); --gold-primary:var(--fa-gold); --gold-light:var(--fa-gold-strong); --gold-muted:rgba(154,106,58,.16); --gold-rgb:154,106,58; --text-primary:var(--fa-text); --text-secondary:var(--fa-text-secondary); --text-muted:var(--fa-text-muted); --border-soft:var(--fa-border); --border-gold:rgba(154,106,58,.4); --success:#5C8F6C; --warning:var(--fa-gold-strong); --danger:#B4544A; /* These four were literal fallback values (not var() aliases) in :root, so the cascade above can't reach them — override explicitly to avoid pale dark-theme gold/grey text landing on a light background. */ --gold3:var(--fa-text); --gold4:var(--fa-text); --tx2:var(--fa-text-secondary); --b0:rgba(44,33,27,.09); } :root[data-theme="ivory"] #stars-canvas{display:none;} :root[data-theme="ivory"] body{background-image:radial-gradient(ellipse 70% 42% at 50% -8%,rgba(181,138,90,.1) 0%,transparent 72%);} /* Shared floating Dark／Ivory Gold toggle button — identical on every public page. */ #fa-theme-toggle{position:fixed;right:16px;bottom:16px;z-index:9999;min-height:40px;padding:9px 16px;border:1px solid var(--b2);border-radius:99px;background:var(--bg1);color:var(--gold2);font:600 11px var(--sans);letter-spacing:1px;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.28);} :root[data-theme="ivory"] #fa-theme-toggle{background:var(--fa-surface);border-color:var(--fa-border);color:var(--fa-gold-strong);box-shadow:0 10px 26px rgba(44,33,27,.14);}