/* ============================================================ TOPMANIDMB Design System — theme.css โทเคนสี 2 ธีม: Command HUD (default) ↔ Ivory (editorial) ถอดจาก AI Command Center (hq.topmanidmb.net/command) · v1.1 Quality Release ใช้: + theme.js (จำถาวร localStorage 'idmb-theme') ============================================================ */ /* ---------- ธีม 1 · COMMAND HUD (ค่าเริ่มต้น) ---------- */ :root, :root[data-theme="command"] { --theme: command; --bg: #060b18; --bg-grad: radial-gradient(120% 90% at 78% 12%, rgba(91,184,245,.16), transparent 55%), radial-gradient(90% 80% at 12% 88%, rgba(255,203,45,.10), transparent 55%), radial-gradient(120% 120% at 50% 0%, #0d1c38 0%, #0a1426 38%, #060b18 78%); --gold: #FFCB2D; --gold2: #FFE08A; --cyan: #5BB8F5; --cyan2: #8FD0FF; --ink: #EAF0FF; --muted: rgba(234,240,255,.56); --faint: rgba(234,240,255,.50); --line: rgba(143,208,255,.14); --line-2: rgba(143,208,255,.28); --card: rgba(143,208,255,.04); --panel-bg: rgba(8,16,34,.40); --hud-bg: rgba(8,16,34,.55); --input-bg: rgba(0,0,0,.25); /* ตัวอักษรไล่สี (shine) */ --shine: linear-gradient(100deg, #FFCB2D 10%, #FFE08A 45%, #8FD0FF 95%); /* ปุ่ม solid = ไล่ทอง ตัวอักษรเข้ม */ --solid-bg: linear-gradient(180deg, #FFE08A, #FFCB2D); --solid-ink: #1a1305; --solid-glow: 0 10px 26px -8px rgba(255,203,45,.5); --stat-num: #fff; /* semantic tokens: ใช้กับข้อความ/สถานะ แทนการเลือกสีดิบ */ --text-primary: var(--ink); --text-secondary: var(--muted); --text-tertiary: var(--faint); --accent-primary: var(--gold); --accent-secondary: var(--cyan); --accent-text: var(--gold2); --border-subtle: var(--line); --border-strong: var(--line-2); --focus-ring: #8FD0FF; --status-success: #43D17A; --status-warning: #FFCB2D; --status-danger: #FF8A7A; --status-info: #5BB8F5; --support-teal: #5BE0C0; --support-teal-strong: #1C6E8C; --support-blue: #2E6FB0; --support-blue-soft: #7DB0DD; /* accent ต่อหมวด (กราฟ/แท่ง) */ --acc-1: linear-gradient(90deg,#2E6FB0,#8FD0FF); --acc-2: linear-gradient(90deg,#A9760A,#FFE08A); --acc-3: linear-gradient(90deg,#1C6E8C,#5BE0C0); --acc-4: linear-gradient(90deg,#5BB8F5,#FFCB2D); /* ชั้นบรรยากาศ (0 = ปิด) */ --neb-op: 1; --star-op: 1; --scan-op: .5; --emblem-shadow: drop-shadow(0 18px 50px rgba(0,0,0,.6)); /* ฟอนต์ */ --hud-font: 'Rajdhani', system-ui, sans-serif; --thai: 'Kanit', system-ui, sans-serif; --display: 'Kanit', system-ui, sans-serif; color-scheme: dark; } /* ---------- ธีม 2 · IVORY (สว่าง editorial) ---------- */ :root[data-theme="ivory"] { --theme: ivory; --bg: #f5f0e4; --bg-grad: radial-gradient(1100px 620px at 82% -10%, rgba(169,133,47,.10), transparent 60%), radial-gradient(900px 560px at 6% 2%, rgba(47,110,168,.06), transparent 55%), linear-gradient(180deg, #faf6ec, #f1ebdc); --gold: #a9852f; --gold2: #8a6a1e; --cyan: #2f6ea8; --cyan2: #3f7fb8; --ink: #2c3446; --muted: #6b6555; --faint: #6f695b; --line: #e2d7c0; --line-2: #d8cbb0; --card: #fffdf7; --panel-bg: #fffdf7; --hud-bg: rgba(255,254,251,.82); --input-bg: #fffefb; --shine: linear-gradient(100deg, #a9852f 6%, #c9a24a 42%, #2f6ea8 96%); --solid-bg: linear-gradient(180deg, #f6e6b8, #efd68d); --solid-ink: #3a2c08; --solid-glow: 0 10px 26px -12px rgba(169,133,47,.55); --stat-num: #26395c; --text-primary: var(--ink); --text-secondary: var(--muted); --text-tertiary: var(--faint); --accent-primary: var(--gold); --accent-secondary: var(--cyan); --accent-text: #7d6019; --border-subtle: var(--line); --border-strong: var(--line-2); --focus-ring: #2f6ea8; --status-success: #2F7A4A; --status-warning: #7D6019; --status-danger: #A33A32; --status-info: #2F6EA8; --support-teal: #4FB0A0; --support-teal-strong: #1C6E8C; --support-blue: #26395C; --support-blue-soft: #5A7BA6; --acc-1: linear-gradient(90deg,#2f6ea8,#7db0dd); --acc-2: linear-gradient(90deg,#a9760a,#d8b45a); --acc-3: linear-gradient(90deg,#1c6e8c,#4fb0a0); --acc-4: linear-gradient(90deg,#2f6ea8,#c9a24a); --neb-op: 1; --star-op: 0; --scan-op: 0; --emblem-shadow: drop-shadow(0 16px 40px rgba(90,68,20,.28)); --hud-font: 'Rajdhani', system-ui, sans-serif; --thai: 'Sarabun', 'Kanit', system-ui, sans-serif; --display: 'Trirong', 'Kanit', serif; color-scheme: light; }