/* ============================================================ TOPMANIDMB Design System — theme.css โทเคนสี 3 ธีม: Command HUD (default) · Ivory (editorial) · Official (clean formal) v1.3 ใช้: + 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; --status-unknown: #9AA6B5; /* status contract: verified/fresh = success · stale/partial = warning · confirmed failure = danger reachable/selected = info · absent/unverified = unknown */ --state-verified: var(--status-success); --state-stale: var(--status-warning); --state-failure: var(--status-danger); --state-reachable: var(--status-info); --state-unknown: var(--status-unknown); --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; --status-unknown: #6F695B; --state-verified: var(--status-success); --state-stale: var(--status-warning); --state-failure: var(--status-danger); --state-reachable: var(--status-info); --state-unknown: var(--status-unknown); --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; } /* ---------- ธีม 3 · OFFICIAL (ขาว/ฟ้าอ่อน · Navy · Gold · Cyan) ---------- Semantic roles (ผู้การสั่ง 26 ก.ค. 2569): ขาว / ฟ้าอ่อน = สะอาด เป็นทางการ Navy = ความน่าเชื่อถือ Gold = ความสำคัญระดับปฏิบัติการ Cyan = เทคโนโลยี / การพิสูจน์ / Data ต่างจาก Ivory: เย็นกว่า (ขาว-ฟ้า ไม่ครีม) · ใช้ cyan เป็น proof/data ชัด · เหมาะเอกสารราชการ + หน้า data clean */ :root[data-theme="official"] { --theme: official; /* Surface — clean formal (ขาว + ฟ้าอ่อน) */ --bg: #F5F9FC; --bg-grad: radial-gradient(1000px 560px at 88% -8%, rgba(91,184,245,.14), transparent 58%), radial-gradient(800px 480px at 6% 6%, rgba(11,22,38,.035), transparent 55%), linear-gradient(180deg, #FFFFFF 0%, #F0F6FB 52%, #EAF2F8 100%); /* Gold = ความสำคัญระดับปฏิบัติการ */ --gold: #C9A24B; --gold2: #A9842F; /* Cyan = เทคโนโลยี / การพิสูจน์ / Data */ --cyan: #1E8FD4; --cyan2: #5BB8F5; /* Navy = ความน่าเชื่อถือ (หมึกหลัก) */ --ink: #0B1626; --muted: rgba(11,22,38,.62); --faint: rgba(11,22,38,.48); --navy: #0B1626; --navy2: #14233A; --line: rgba(30,143,212,.18); --line-2: rgba(11,22,38,.14); --card: #FFFFFF; --panel-bg: rgba(255,255,255,.94); --hud-bg: rgba(245,249,252,.96); --input-bg: #FFFFFF; --shine: linear-gradient(100deg, #C9A24B 8%, #A9842F 38%, #1E8FD4 96%); --solid-bg: linear-gradient(180deg, #E8C877, #C9A24B); --solid-ink: #1a1305; --solid-glow: 0 10px 26px -12px rgba(201,162,75,.42); --stat-num: #0B1626; --text-primary: var(--ink); --text-secondary: var(--muted); --text-tertiary: var(--faint); --accent-primary: var(--gold); --accent-secondary: var(--cyan); --accent-text: #A9842F; --border-subtle: var(--line); --border-strong: var(--line-2); --focus-ring: #1E8FD4; --status-success: #2F7A4A; --status-warning: #A9842F; --status-danger: #A33A32; --status-info: #1E8FD4; --status-unknown: #6B7A8C; --state-verified: var(--status-success); --state-stale: var(--status-warning); --state-failure: var(--status-danger); --state-reachable: var(--status-info); --state-unknown: var(--status-unknown); --support-teal: #2AA89A; --support-teal-strong: #1C6E8C; --support-blue: #0B1626; --support-blue-soft: #5BB8F5; /* Role tokens — ใช้ตั้งชื่อความหมาย ไม่ต้องจำ hex */ --role-surface: #FFFFFF; --role-surface-soft: #EAF2F8; --role-trust: #0B1626; --role-ops: #C9A24B; --role-proof: #1E8FD4; --acc-1: linear-gradient(90deg,#0B1626,#5BB8F5); --acc-2: linear-gradient(90deg,#A9842F,#E8C877); --acc-3: linear-gradient(90deg,#1E8FD4,#8FD0FF); --acc-4: linear-gradient(90deg,#0B1626,#C9A24B); --neb-op: 0.28; --star-op: 0; --scan-op: 0; --emblem-shadow: drop-shadow(0 14px 36px rgba(11,22,38,.16)); --hud-font: 'Rajdhani', system-ui, sans-serif; --thai: 'Sarabun', 'Kanit', system-ui, sans-serif; --display: 'Kanit', system-ui, sans-serif; color-scheme: light; }