/* ================================================================ INDEX'SUN — Shared Design Tokens ใช้ร่วมกันทุก hub + portal ================================================================ */ :root{ /* Neutral palette */ --bg:#f8f8f6; --surface:#fff; --surface-2:#f3f2ed; --border:#e6e5e2; --text:#1f1f1f; --text2:#555; --text3:#8b8b88; /* Typography */ --font-thai:'IBM Plex Sans Thai',-apple-system,BlinkMacSystemFont,sans-serif; --font-mono:'IBM Plex Mono',ui-monospace,monospace; /* Spacing unit */ --s-1:.25rem; --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; /* Radius */ --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px; /* Master brand — INDEX'SUN */ --master:#8b7e9e; --master-soft:#c4b5d9; /* Per-hub accents (defaults = master) */ --accent:var(--master); --accent-soft:var(--master-soft); --accent-text:#fff; /* Shadow */ --shadow-sm:0 1px 2px rgba(0,0,0,.04),0 1px 3px rgba(0,0,0,.06); --shadow-md:0 2px 4px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 4px 8px rgba(0,0,0,.06),0 12px 24px rgba(0,0,0,.12); /* Cross-hub reference (xref) tokens */ --xref-pill-size:22px; --xref-pill-hover-scale:1.1; --xref-pill-radius:4px; --xref-monogram-font-size:0.62rem; --xref-tooltip-bg:var(--surface-2); --xref-card-width:240px; --xref-card-padding:1rem; --xref-card-title-size:0.88rem; --xref-card-hover-shadow:var(--shadow-lg); } /* Dark mode */ html.dark{ --bg:#0f1012; --surface:#18191c; --surface-2:#212226; --border:rgba(255,255,255,.08); --text:#e7e7e5; --text2:#a0a09d; --text3:#6b6b68; --master:#c4b5d9; --master-soft:#8b7e9e; --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.4); --shadow-md:0 2px 4px rgba(0,0,0,.3),0 4px 12px rgba(0,0,0,.4); --shadow-lg:0 4px 8px rgba(0,0,0,.4),0 12px 24px rgba(0,0,0,.5); } /* ============================ Hub-specific accent overrides ใช้บน ฯลฯ ============================ */ /* MTL — ความรู้ประกัน (ม่วง) */ body.hub-mtl{ --accent:#7a4aa2; --accent-soft:#d4a9ff; --hub-mono-bg:#7a4aa2; } html.dark body.hub-mtl{ --accent:#b68fd0; --accent-soft:#7a4aa2; --hub-mono-bg:#b68fd0; } /* Law — กฎหมาย (ส้มเผา — สลับธีมจากเดิม) */ body.hub-law{ --accent:#c85a3a; --accent-soft:#f5c4b0; --hub-mono-bg:#c85a3a; } html.dark body.hub-law{ --accent:#e09070; --accent-soft:#c85a3a; --hub-mono-bg:#e09070; } /* Invest — การลงทุน (teal — Dime-inspired, ไม่ชน .pos/.warn semantic colors) */ body.hub-invest{ --accent:#0fb5a5; --accent-soft:#c5ede8; --hub-mono-bg:#0fb5a5; } html.dark body.hub-invest{ --accent:#2dd4bf; --accent-soft:#134e4a; --hub-mono-bg:#2dd4bf; } /* Health — สุขภาพ (coral) */ body.hub-health{ --accent:#c94f6d; --accent-soft:#f5c8d3; --hub-mono-bg:#c94f6d; } html.dark body.hub-health{ --accent:#e68aa0; --accent-soft:#7a2f42; --hub-mono-bg:#e68aa0; } /* Portal (INDEX'SUN หน้าแรก) */ body.hub-portal{ --accent:var(--master); --accent-soft:var(--master-soft); --hub-mono-bg:var(--master); } /* Universal reset (เผื่อ page ไม่มี) */ *{box-sizing:border-box}