/* ============================================================ ธีมสี — เปลี่ยนผ่าน data-theme บน ============================================================ */ [data-theme="warm"] { --brand-50: #fffbeb; --brand-100: #fef3c7; --brand-200: #fde68a; --brand-300: #fcd34d; --brand-400: #fbbf24; --brand-500: #f59e0b; --brand-600: #d97706; --brand-700: #b45309; --brand-800: #92400e; --brand-900: #78350f; --accent: #be123c; --ink: #1f2937; --gradient-brand: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #be123c 100%); --gradient-text: linear-gradient(135deg, #d97706 0%, #be123c 100%); --gradient-warm: linear-gradient(135deg, #fffbeb 0%, #fff7ed 50%, #fff1f2 100%); --hero-bg: #fffbeb; --hero-radial-1: rgba(245, 158, 11, 0.25); --hero-radial-2: rgba(190, 18, 60, 0.18); --hero-radial-3: rgba(245, 158, 11, 0.20); --hero-radial-4: rgba(190, 18, 60, 0.15); --fab-mid: #d97706; --fab-end: #be123c; --pulse-ring: rgba(217, 119, 6, 0.6); } [data-theme="forest"] { --brand-50: #ecfdf5; --brand-100: #d1fae5; --brand-200: #a7f3d0; --brand-300: #6ee7b7; --brand-400: #34d399; --brand-500: #10b981; --brand-600: #059669; --brand-700: #047857; --brand-800: #065f46; --brand-900: #064e3b; --accent: #0d9488; --ink: #1a2e2a; --gradient-brand: linear-gradient(135deg, #10b981 0%, #059669 50%, #0d9488 100%); --gradient-text: linear-gradient(135deg, #059669 0%, #0d9488 100%); --gradient-warm: linear-gradient(135deg, #ecfdf5 0%, #f0fdfa 50%, #ecfeff 100%); --hero-bg: #ecfdf5; --hero-radial-1: rgba(16, 185, 129, 0.22); --hero-radial-2: rgba(13, 148, 136, 0.16); --hero-radial-3: rgba(52, 211, 153, 0.18); --hero-radial-4: rgba(5, 150, 105, 0.12); --fab-mid: #059669; --fab-end: #0d9488; --pulse-ring: rgba(5, 150, 105, 0.55); } [data-theme="ocean"] { --brand-50: #eff6ff; --brand-100: #dbeafe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #2563eb; --brand-700: #1d4ed8; --brand-800: #1e40af; --brand-900: #1e3a8a; --accent: #0891b2; --ink: #1e293b; --gradient-brand: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #0891b2 100%); --gradient-text: linear-gradient(135deg, #2563eb 0%, #0891b2 100%); --gradient-warm: linear-gradient(135deg, #eff6ff 0%, #ecfeff 50%, #f0f9ff 100%); --hero-bg: #eff6ff; --hero-radial-1: rgba(59, 130, 246, 0.22); --hero-radial-2: rgba(8, 145, 178, 0.16); --hero-radial-3: rgba(96, 165, 250, 0.18); --hero-radial-4: rgba(37, 99, 235, 0.12); --fab-mid: #2563eb; --fab-end: #0891b2; --pulse-ring: rgba(37, 99, 235, 0.55); } [data-theme="royal"] { --brand-50: #faf5ff; --brand-100: #f3e8ff; --brand-200: #e9d5ff; --brand-300: #d8b4fe; --brand-400: #c084fc; --brand-500: #a855f7; --brand-600: #9333ea; --brand-700: #7e22ce; --brand-800: #6b21a8; --brand-900: #581c87; --accent: #db2777; --ink: #2e1065; --gradient-brand: linear-gradient(135deg, #a855f7 0%, #9333ea 50%, #db2777 100%); --gradient-text: linear-gradient(135deg, #9333ea 0%, #db2777 100%); --gradient-warm: linear-gradient(135deg, #faf5ff 0%, #fdf4ff 50%, #fdf2f8 100%); --hero-bg: #faf5ff; --hero-radial-1: rgba(168, 85, 247, 0.22); --hero-radial-2: rgba(219, 39, 119, 0.16); --hero-radial-3: rgba(192, 132, 252, 0.18); --hero-radial-4: rgba(147, 51, 234, 0.12); --fab-mid: #9333ea; --fab-end: #db2777; --pulse-ring: rgba(147, 51, 234, 0.55); } [data-theme="lotus"] { --brand-50: #fdf2f8; --brand-100: #fce7f3; --brand-200: #fbcfe8; --brand-300: #f9a8d4; --brand-400: #f472b6; --brand-500: #ec4899; --brand-600: #db2777; --brand-700: #be185d; --brand-800: #9d174d; --brand-900: #831843; --accent: #7c3aed; --ink: #3b0a2a; --gradient-brand: linear-gradient(135deg, #ec4899 0%, #db2777 50%, #7c3aed 100%); --gradient-text: linear-gradient(135deg, #db2777 0%, #7c3aed 100%); --gradient-warm: linear-gradient(135deg, #fdf2f8 0%, #faf5ff 50%, #fff1f2 100%); --hero-bg: #fdf2f8; --hero-radial-1: rgba(236, 72, 153, 0.22); --hero-radial-2: rgba(124, 58, 237, 0.16); --hero-radial-3: rgba(244, 114, 182, 0.18); --hero-radial-4: rgba(219, 39, 119, 0.12); --fab-mid: #db2777; --fab-end: #7c3aed; --pulse-ring: rgba(219, 39, 119, 0.55); } [data-theme="sunset"] { --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-200: #fed7aa; --brand-300: #fdba74; --brand-400: #fb923c; --brand-500: #f97316; --brand-600: #ea580c; --brand-700: #c2410c; --brand-800: #9a3412; --brand-900: #7c2d12; --accent: #e11d48; --ink: #431407; --gradient-brand: linear-gradient(135deg, #f97316 0%, #ea580c 50%, #e11d48 100%); --gradient-text: linear-gradient(135deg, #ea580c 0%, #e11d48 100%); --gradient-warm: linear-gradient(135deg, #fff7ed 0%, #fff1f2 50%, #fef2f2 100%); --hero-bg: #fff7ed; --hero-radial-1: rgba(249, 115, 22, 0.24); --hero-radial-2: rgba(225, 29, 72, 0.16); --hero-radial-3: rgba(251, 146, 60, 0.18); --hero-radial-4: rgba(234, 88, 12, 0.12); --fab-mid: #ea580c; --fab-end: #e11d48; --pulse-ring: rgba(234, 88, 12, 0.55); } [data-theme="cherry"] { --brand-50: #fef2f2; --brand-100: #fee2e2; --brand-200: #fecaca; --brand-300: #fca5a5; --brand-400: #f87171; --brand-500: #ef4444; --brand-600: #dc2626; --brand-700: #b91c1c; --brand-800: #991b1b; --brand-900: #7f1d1d; --accent: #be123c; --ink: #450a0a; --gradient-brand: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #be123c 100%); --gradient-text: linear-gradient(135deg, #dc2626 0%, #be123c 100%); --gradient-warm: linear-gradient(135deg, #fef2f2 0%, #fff1f2 50%, #fdf2f8 100%); --hero-bg: #fef2f2; --hero-radial-1: rgba(239, 68, 68, 0.22); --hero-radial-2: rgba(190, 18, 60, 0.16); --hero-radial-3: rgba(248, 113, 113, 0.18); --hero-radial-4: rgba(220, 38, 38, 0.12); --fab-mid: #dc2626; --fab-end: #be123c; --pulse-ring: rgba(220, 38, 38, 0.55); } [data-theme="mint"] { --brand-50: #f0fdfa; --brand-100: #ccfbf1; --brand-200: #99f6e4; --brand-300: #5eead4; --brand-400: #2dd4bf; --brand-500: #14b8a6; --brand-600: #0d9488; --brand-700: #0f766e; --brand-800: #115e59; --brand-900: #134e4a; --accent: #06b6d4; --ink: #134e4a; --gradient-brand: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 50%, #06b6d4 100%); --gradient-text: linear-gradient(135deg, #14b8a6 0%, #06b6d4 100%); --gradient-warm: linear-gradient(135deg, #f0fdfa 0%, #ecfeff 50%, #f0f9ff 100%); --hero-bg: #f0fdfa; --hero-radial-1: rgba(45, 212, 191, 0.22); --hero-radial-2: rgba(6, 182, 212, 0.16); --hero-radial-3: rgba(20, 184, 166, 0.18); --hero-radial-4: rgba(13, 148, 136, 0.12); --fab-mid: #14b8a6; --fab-end: #06b6d4; --pulse-ring: rgba(13, 148, 136, 0.55); } [data-theme="slate"] { --brand-50: #f8fafc; --brand-100: #f1f5f9; --brand-200: #e2e8f0; --brand-300: #cbd5e1; --brand-400: #94a3b8; --brand-500: #64748b; --brand-600: #475569; --brand-700: #334155; --brand-800: #1e293b; --brand-900: #0f172a; --accent: #0284c7; --ink: #0f172a; --gradient-brand: linear-gradient(135deg, #64748b 0%, #475569 50%, #0284c7 100%); --gradient-text: linear-gradient(135deg, #475569 0%, #0284c7 100%); --gradient-warm: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 50%, #eff6ff 100%); --hero-bg: #f8fafc; --hero-radial-1: rgba(100, 116, 139, 0.2); --hero-radial-2: rgba(2, 132, 199, 0.14); --hero-radial-3: rgba(148, 163, 184, 0.16); --hero-radial-4: rgba(71, 85, 105, 0.1); --fab-mid: #475569; --fab-end: #0284c7; --pulse-ring: rgba(71, 85, 105, 0.5); } [data-theme="dawn"] { --brand-50: #fff7ed; --brand-100: #ffedd5; --brand-200: #fecdd3; --brand-300: #fda4af; --brand-400: #fb923c; --brand-500: #f472b6; --brand-600: #ec4899; --brand-700: #db2777; --brand-800: #be185d; --brand-900: #9d174d; --accent: #fb7185; --ink: #4a044e; --gradient-brand: linear-gradient(135deg, #fb923c 0%, #f472b6 50%, #fda4af 100%); --gradient-text: linear-gradient(135deg, #f472b6 0%, #fb923c 100%); --gradient-warm: linear-gradient(135deg, #fff7ed 0%, #fdf2f8 50%, #fff1f2 100%); --hero-bg: #fff7ed; --hero-radial-1: rgba(251, 146, 60, 0.22); --hero-radial-2: rgba(244, 114, 182, 0.16); --hero-radial-3: rgba(253, 164, 175, 0.18); --hero-radial-4: rgba(236, 72, 153, 0.12); --fab-mid: #f472b6; --fab-end: #fb7185; --pulse-ring: rgba(244, 114, 182, 0.55); } /* สเกล accent อัตomatic จาก --accent ของแต่ละธีม */ html[data-theme] { --accent-50: color-mix(in srgb, var(--accent) 10%, white); --accent-100: color-mix(in srgb, var(--accent) 18%, white); --accent-200: color-mix(in srgb, var(--accent) 30%, white); --accent-300: color-mix(in srgb, var(--accent) 45%, white); --accent-400: color-mix(in srgb, var(--accent) 62%, white); --accent-500: var(--accent); --accent-600: color-mix(in srgb, var(--accent) 88%, black); --accent-700: color-mix(in srgb, var(--accent) 72%, black); } /* แมปสี Tailwind ที่ hardcode → ตัวแปรธีม (frontend) */ .bg-brand-50 { background-color: var(--brand-50) !important; } .bg-brand-100 { background-color: var(--brand-100) !important; } .bg-brand-200 { background-color: var(--brand-200) !important; } .bg-brand-300 { background-color: var(--brand-300) !important; } .bg-brand-400 { background-color: var(--brand-400) !important; } .bg-brand-500 { background-color: var(--brand-500) !important; } .bg-brand-600 { background-color: var(--brand-600) !important; } .text-brand-300 { color: var(--brand-300) !important; } .text-brand-400 { color: var(--brand-400) !important; } .text-brand-500 { color: var(--brand-500) !important; } .text-brand-600 { color: var(--brand-600) !important; } .text-brand-700 { color: var(--brand-700) !important; } .text-brand-800 { color: var(--brand-800) !important; } .border-brand-100 { border-color: var(--brand-100) !important; } .border-brand-200 { border-color: var(--brand-200) !important; } .border-brand-300 { border-color: var(--brand-300) !important; } .border-brand-400 { border-color: var(--brand-400) !important; } .border-brand-500 { border-color: var(--brand-500) !important; } .hover\:border-brand-500:hover { border-color: var(--brand-500) !important; } .hover\:text-brand-700:hover { color: var(--brand-700) !important; } .hover\:text-brand-300:hover { color: var(--brand-300) !important; } .hover\:bg-brand-600:hover { background-color: var(--brand-600) !important; } .hover\:bg-brand-50:hover { background-color: var(--brand-50) !important; } .hover\:bg-brand-100:hover { background-color: var(--brand-100) !important; } .focus\:ring-brand-400:focus { --tw-ring-color: var(--brand-400) !important; } .focus\:border-brand-400:focus { border-color: var(--brand-400) !important; } .ring-brand-500 { --tw-ring-color: var(--brand-500) !important; } .peer:checked ~ .peer-checked\:ring-brand-500 { --tw-ring-color: var(--brand-500) !important; } .peer:checked ~ .peer-checked\:bg-brand-100 { background-color: var(--brand-100) !important; } .bg-amber-50 { background-color: var(--brand-50) !important; } .bg-amber-100 { background-color: var(--brand-100) !important; } .bg-amber-300 { background-color: var(--brand-300) !important; } .border-amber-100 { border-color: var(--brand-100) !important; } .border-amber-200 { border-color: var(--brand-200) !important; } .text-amber-700 { color: var(--brand-700) !important; } .text-amber-800 { color: var(--brand-800) !important; } .text-amber-900 { color: var(--brand-900) !important; } .ring-amber-500 { --tw-ring-color: var(--brand-500) !important; } .from-amber-50 { --tw-gradient-from: var(--brand-50) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-amber-50 { --tw-gradient-to: var(--brand-50) var(--tw-gradient-to-position); } .via-orange-50 { --tw-gradient-via: var(--brand-50) var(--tw-gradient-via-position); } .bg-orange-50 { background-color: var(--brand-50) !important; } .bg-rose-50 { background-color: var(--accent-50) !important; } .bg-rose-100 { background-color: var(--accent-100) !important; } .bg-rose-300 { background-color: var(--accent-300) !important; } .bg-rose-500 { background-color: var(--accent-500) !important; } .bg-rose-600 { background-color: var(--accent-600) !important; } .text-rose-600 { color: var(--accent-600) !important; } .text-rose-700 { color: var(--accent-700) !important; } .border-rose-500 { border-color: var(--accent-500) !important; } .from-rose-50 { --tw-gradient-from: var(--accent-50) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-rose-50 { --tw-gradient-to: var(--accent-50) var(--tw-gradient-to-position); } .hover\:text-rose-700:hover { color: var(--accent-700) !important; } .hover\:bg-rose-700:hover { background-color: var(--accent-700) !important; } .bg-accent-50 { background-color: var(--accent-50) !important; } .bg-accent-100 { background-color: var(--accent-100) !important; } .bg-accent-300 { background-color: var(--accent-300) !important; } .text-accent-600 { color: var(--accent-600) !important; } .text-accent-700 { color: var(--accent-700) !important; } .border-accent-500 { border-color: var(--accent-500) !important; } .border-t-accent-500 { border-top-color: var(--accent-500) !important; } .from-accent-50 { --tw-gradient-from: var(--accent-50) var(--tw-gradient-from-position); --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } .to-accent-50 { --tw-gradient-to: var(--accent-50) var(--tw-gradient-to-position); } .bg-gradient-to-br.from-accent-50.to-brand-50 { background-image: linear-gradient(to bottom right, var(--accent-50), var(--brand-50)) !important; } /* gradient utilities */ .bg-gradient-brand { background-image: var(--gradient-brand) !important; } .bg-gradient-warm { background-image: var(--gradient-warm) !important; } .text-gradient-brand { background: var(--gradient-text) !important; -webkit-background-clip: text; background-clip: text; color: transparent !important; }