/* ═══════════════════════════════════════════════════════════════════════════ NANAJUNG THEME VARIABLES - 2026 Color Trends 🎨 7 Themes สำหรับแต่ละโครงการ วิธีใช้: 1. เพิ่ม data-theme="theme-name" ใน หรือ 2. เช่น: Themes ที่มี: - clear-sky : สีฟ้าอมเทา (Default) - fuchsia-red : สีม่วงดอกฟูเชีย - tangelo : สีส้มสดใส - vivid-green : สีเขียวโลกสวย - bitter-chocolate : สีน้ำตาลคลาสสิก - asphalt : สีเทาเข้มเรียบง่าย - lavender : สีลาเวนเดอร์นุ่มนวล ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ 🌤️ THEME 1: Clear Sky (สีฟ้าอมเทาเฉด) - DEFAULT ความรู้สึก: ผ่อนคลาย เงียบสงบ ให้ความอบอุ่นแต่ทันสมัย เหมาะกับ: เว็บหลัก, หน้า Dashboard ทั่วไป ═══════════════════════════════════════════════════════════════════════════ */ :root, [data-theme="clear-sky"] { /* Primary Colors */ --theme-primary: #7BA7BC; --theme-primary-light: #A8C8D8; --theme-primary-dark: #4A7A8C; --theme-primary-rgb: 123, 167, 188; /* Secondary Colors */ --theme-secondary: #3D5A6C; --theme-secondary-light: #5D7A8C; --theme-secondary-dark: #2D4A5C; /* Accent Colors */ --theme-accent: #E8B86D; --theme-accent-light: #F5D49A; --theme-accent-dark: #C9944D; /* Background Colors */ --bg-primary: #F5F8FA; --bg-secondary: #E8EEF2; --bg-tertiary: #FFFFFF; --bg-dark: #2D4A5C; --bg-darker: #1E3544; --bg-glass: rgba(255, 255, 255, 0.85); --bg-glass-dark: rgba(45, 74, 92, 0.9); /* Text Colors */ --text-primary: #1E3544; --text-secondary: #4A6572; --text-muted: #7B8E98; --text-light: #FFFFFF; --text-accent: var(--theme-primary-dark); /* Borders */ --border-light: rgba(123, 167, 188, 0.25); --border-medium: rgba(123, 167, 188, 0.4); --border-dark: rgba(45, 74, 92, 0.3); /* Shadows */ --shadow-sm: 0 2px 8px rgba(45, 74, 92, 0.08); --shadow-md: 0 4px 16px rgba(45, 74, 92, 0.12); --shadow-lg: 0 8px 32px rgba(45, 74, 92, 0.16); --shadow-xl: 0 16px 48px rgba(45, 74, 92, 0.2); --shadow-glow: 0 0 24px rgba(123, 167, 188, 0.3); --shadow-inset: inset 0 2px 4px rgba(45, 74, 92, 0.06); /* Gradients */ --gradient-primary: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%); --gradient-secondary: linear-gradient(135deg, var(--theme-secondary) 0%, var(--theme-secondary-dark) 100%); --gradient-accent: linear-gradient(135deg, var(--theme-accent) 0%, var(--theme-accent-dark) 100%); --gradient-card: linear-gradient(145deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%); --gradient-hero: linear-gradient(135deg, var(--bg-dark) 0%, var(--theme-secondary-dark) 100%); /* Status Colors */ --color-success: #5CB88F; --color-success-light: #7FCAA8; --color-warning: #E8B86D; --color-warning-light: #F5D49A; --color-error: #D47474; --color-error-light: #E89A9A; --color-info: var(--theme-primary); --color-info-light: var(--theme-primary-light); /* Interactive States */ --hover-lift: translateY(-2px); --hover-scale: scale(1.02); --active-scale: scale(0.98); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.25s ease; --transition-slow: 0.4s ease; --transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Spacing */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Layout */ --max-width: 1200px; --header-height: 64px; --sidebar-width: 280px; } /* ═══════════════════════════════════════════════════════════════════════════ 🌺 THEME 2: Fuchsia Red (สีม่วงดอกฟูเชียเฉด) ความรู้สึก: ก้าวหน้า ท้าทาย ตื่นเต้น จุดประกายความคิดสร้างสรรค์ เหมาะกับ: โครงการเกม, ความบันเทิง, แบรนด์ที่ต้องการเชื่อมโลกจริงและโลกเสมือน ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="fuchsia-red"] { --theme-primary: #C74B8E; --theme-primary-light: #E07AB5; --theme-primary-dark: #9A3A6E; --theme-primary-rgb: 199, 75, 142; --theme-secondary: #6B2D4A; --theme-secondary-light: #8B4D6A; --theme-secondary-dark: #4B1D3A; --theme-accent: #FFD166; --theme-accent-light: #FFE199; --theme-accent-dark: #E5B84D; --bg-primary: #FDF5F9; --bg-secondary: #F9E8F0; --bg-tertiary: #FFFFFF; --bg-dark: #4B1D3A; --bg-darker: #2D1224; --bg-glass: rgba(255, 255, 255, 0.88); --bg-glass-dark: rgba(75, 29, 58, 0.92); --text-primary: #2D1224; --text-secondary: #5A3548; --text-muted: #8A6578; --text-light: #FFFFFF; --border-light: rgba(199, 75, 142, 0.2); --border-medium: rgba(199, 75, 142, 0.35); --border-dark: rgba(75, 29, 58, 0.25); --shadow-sm: 0 2px 8px rgba(75, 29, 58, 0.08); --shadow-md: 0 4px 16px rgba(75, 29, 58, 0.12); --shadow-lg: 0 8px 32px rgba(75, 29, 58, 0.18); --shadow-xl: 0 16px 48px rgba(75, 29, 58, 0.22); --shadow-glow: 0 0 24px rgba(199, 75, 142, 0.35); --gradient-hero: linear-gradient(135deg, #6B2D4A 0%, #2D1224 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 🍊 THEME 3: Tangelo (สีส้มสดใสเฉด) ความรู้สึก: มีพลัง กระตุ้นแรงบันดาลใจ ความสุข Art Deco เหมาะกับ: โครงการสร้างสรรค์, ร้านค้า, แคมเปญพิเศษ ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="tangelo"] { --theme-primary: #FF8C00; --theme-primary-light: #FFB347; --theme-primary-dark: #D97400; --theme-primary-rgb: 255, 140, 0; --theme-secondary: #8B4513; --theme-secondary-light: #A0522D; --theme-secondary-dark: #5D2E0D; --theme-accent: #2D5A4A; --theme-accent-light: #3D7A6A; --theme-accent-dark: #1D3A2A; --bg-primary: #FFFAF5; --bg-secondary: #FFF0E6; --bg-tertiary: #FFFFFF; --bg-dark: #5D2E0D; --bg-darker: #3D1E08; --bg-glass: rgba(255, 255, 255, 0.9); --bg-glass-dark: rgba(93, 46, 13, 0.92); --text-primary: #3D1E08; --text-secondary: #5D3E28; --text-muted: #8D6E58; --text-light: #FFFFFF; --border-light: rgba(255, 140, 0, 0.2); --border-medium: rgba(255, 140, 0, 0.35); --border-dark: rgba(93, 46, 13, 0.25); --shadow-sm: 0 2px 8px rgba(93, 46, 13, 0.08); --shadow-md: 0 4px 16px rgba(93, 46, 13, 0.12); --shadow-lg: 0 8px 32px rgba(93, 46, 13, 0.18); --shadow-xl: 0 16px 48px rgba(93, 46, 13, 0.22); --shadow-glow: 0 0 24px rgba(255, 140, 0, 0.35); --gradient-hero: linear-gradient(135deg, #8B4513 0%, #3D1E08 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 🌿 THEME 4: Vivid Green (สีเขียวโลกสวยเฉด) ความรู้สึก: สดชื่น ธรรมชาติ หวนนึกถึงอดีต ฤดูร้อน เหมาะกับ: โครงการ Eco, สุขภาพ, ไลฟ์สไตล์ ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="vivid-green"] { --theme-primary: #00A878; --theme-primary-light: #33C49A; --theme-primary-dark: #008060; --theme-primary-rgb: 0, 168, 120; --theme-secondary: #1A5D4A; --theme-secondary-light: #2A7D6A; --theme-secondary-dark: #0A3D2A; --theme-accent: #FF6B6B; --theme-accent-light: #FF9B9B; --theme-accent-dark: #E54B4B; --bg-primary: #F5FAF8; --bg-secondary: #E8F5F0; --bg-tertiary: #FFFFFF; --bg-dark: #0A3D2A; --bg-darker: #052118; --bg-glass: rgba(255, 255, 255, 0.88); --bg-glass-dark: rgba(10, 61, 42, 0.92); --text-primary: #052118; --text-secondary: #1A4538; --text-muted: #4A7568; --text-light: #FFFFFF; --border-light: rgba(0, 168, 120, 0.2); --border-medium: rgba(0, 168, 120, 0.35); --border-dark: rgba(10, 61, 42, 0.25); --shadow-sm: 0 2px 8px rgba(10, 61, 42, 0.08); --shadow-md: 0 4px 16px rgba(10, 61, 42, 0.12); --shadow-lg: 0 8px 32px rgba(10, 61, 42, 0.18); --shadow-xl: 0 16px 48px rgba(10, 61, 42, 0.22); --shadow-glow: 0 0 24px rgba(0, 168, 120, 0.35); --gradient-hero: linear-gradient(135deg, #1A5D4A 0%, #052118 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 🍫 THEME 5: Bitter Chocolate (สีน้ำตาลคลาสสิกเฉด) ความรู้สึก: หรูหรา คลาสสิก เหนือกาลเวลา วินเทจ เหมาะกับ: โครงการ Premium, ร้านค้าหรู, คอนเทนต์ Craft ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="bitter-chocolate"] { --theme-primary: #5D4037; --theme-primary-light: #8D6E63; --theme-primary-dark: #3E2723; --theme-primary-rgb: 93, 64, 55; --theme-secondary: #4E342E; --theme-secondary-light: #6D4C41; --theme-secondary-dark: #2E1C18; --theme-accent: #D4AF37; --theme-accent-light: #E8C867; --theme-accent-dark: #B8962D; --bg-primary: #FAF8F6; --bg-secondary: #F0EBE6; --bg-tertiary: #FFFFFF; --bg-dark: #2E1C18; --bg-darker: #1A100E; --bg-glass: rgba(255, 255, 255, 0.9); --bg-glass-dark: rgba(46, 28, 24, 0.92); --text-primary: #1A100E; --text-secondary: #3E2723; --text-muted: #6D5A55; --text-light: #FFFFFF; --border-light: rgba(93, 64, 55, 0.2); --border-medium: rgba(93, 64, 55, 0.35); --border-dark: rgba(46, 28, 24, 0.25); --shadow-sm: 0 2px 8px rgba(46, 28, 24, 0.1); --shadow-md: 0 4px 16px rgba(46, 28, 24, 0.14); --shadow-lg: 0 8px 32px rgba(46, 28, 24, 0.2); --shadow-xl: 0 16px 48px rgba(46, 28, 24, 0.25); --shadow-glow: 0 0 24px rgba(212, 175, 55, 0.3); --gradient-hero: linear-gradient(135deg, #4E342E 0%, #1A100E 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 🏛️ THEME 6: Asphalt (สีเทาเข้มเรียบง่ายเฉด) ความรู้สึก: เรียบง่าย คลาสสิก เงียบสงบ โมเดิร์น เหมาะกับ: โครงการ Tech, Admin Panel, Dashboard ข้อมูล ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="asphalt"] { --theme-primary: #4A5568; --theme-primary-light: #718096; --theme-primary-dark: #2D3748; --theme-primary-rgb: 74, 85, 104; --theme-secondary: #2D3748; --theme-secondary-light: #4A5568; --theme-secondary-dark: #1A202C; --theme-accent: #48BB78; --theme-accent-light: #68D391; --theme-accent-dark: #38A169; --bg-primary: #F7FAFC; --bg-secondary: #EDF2F7; --bg-tertiary: #FFFFFF; --bg-dark: #1A202C; --bg-darker: #0D1117; --bg-glass: rgba(255, 255, 255, 0.9); --bg-glass-dark: rgba(26, 32, 44, 0.95); --text-primary: #1A202C; --text-secondary: #4A5568; --text-muted: #718096; --text-light: #FFFFFF; --border-light: rgba(74, 85, 104, 0.15); --border-medium: rgba(74, 85, 104, 0.3); --border-dark: rgba(26, 32, 44, 0.2); --shadow-sm: 0 2px 8px rgba(26, 32, 44, 0.06); --shadow-md: 0 4px 16px rgba(26, 32, 44, 0.1); --shadow-lg: 0 8px 32px rgba(26, 32, 44, 0.14); --shadow-xl: 0 16px 48px rgba(26, 32, 44, 0.18); --shadow-glow: 0 0 24px rgba(74, 85, 104, 0.25); --gradient-hero: linear-gradient(135deg, #2D3748 0%, #0D1117 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 💜 THEME 7: Lavender (สีลาเวนเดอร์นุ่มนวล) ความรู้สึก: สงบ ผ่อนคลาย นุ่มนวล ความสุข เหมาะกับ: โครงการ Wellness, Beauty, Lifestyle, ผู้หญิง ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="lavender"] { --theme-primary: #9F7AEA; --theme-primary-light: #B794F4; --theme-primary-dark: #805AD5; --theme-primary-rgb: 159, 122, 234; --theme-secondary: #6B46C1; --theme-secondary-light: #805AD5; --theme-secondary-dark: #553C9A; --theme-accent: #F687B3; --theme-accent-light: #FBB6CE; --theme-accent-dark: #ED64A6; --bg-primary: #FAF5FF; --bg-secondary: #F3E8FF; --bg-tertiary: #FFFFFF; --bg-dark: #553C9A; --bg-darker: #322659; --bg-glass: rgba(255, 255, 255, 0.88); --bg-glass-dark: rgba(85, 60, 154, 0.92); --text-primary: #322659; --text-secondary: #553C9A; --text-muted: #8B7ACC; --text-light: #FFFFFF; --border-light: rgba(159, 122, 234, 0.2); --border-medium: rgba(159, 122, 234, 0.35); --border-dark: rgba(85, 60, 154, 0.25); --shadow-sm: 0 2px 8px rgba(85, 60, 154, 0.08); --shadow-md: 0 4px 16px rgba(85, 60, 154, 0.12); --shadow-lg: 0 8px 32px rgba(85, 60, 154, 0.18); --shadow-xl: 0 16px 48px rgba(85, 60, 154, 0.22); --shadow-glow: 0 0 24px rgba(159, 122, 234, 0.35); --gradient-hero: linear-gradient(135deg, #6B46C1 0%, #322659 100%); } /* ═══════════════════════════════════════════════════════════════════════════ 🌙 DARK MODE VARIANTS - เพิ่ม -dark ต่อท้ายชื่อ theme แต่ละ theme dark จะมีสีหลักเฉพาะตัว ═══════════════════════════════════════════════════════════════════════════ */ /* Clear Sky Dark */ [data-theme="clear-sky-dark"], [data-theme="dark"] { --theme-primary: #7BA7BC; --theme-primary-light: #9BC7DC; --theme-primary-dark: #5B879C; --theme-primary-rgb: 123, 167, 188; --theme-secondary: #2D4A5C; --theme-secondary-light: #3D5A6C; --theme-secondary-dark: #1D3A4C; --theme-accent: #5CB88F; --theme-accent-light: #7FCAA8; --theme-accent-dark: #3CA06F; --bg-primary: #0F1A20; --bg-secondary: #162028; --bg-tertiary: #1C2830; --bg-dark: #0A1216; --bg-darker: #060C0F; --bg-glass: rgba(28, 40, 48, 0.9); --bg-glass-dark: rgba(15, 26, 32, 0.95); --text-primary: #E8EEF2; --text-secondary: #A8B8C2; --text-muted: #6B7C86; --text-light: #FFFFFF; --border-light: rgba(123, 167, 188, 0.15); --border-medium: rgba(123, 167, 188, 0.25); --border-dark: rgba(123, 167, 188, 0.35); --shadow-glow: 0 0 30px rgba(123, 167, 188, 0.25); --gradient-hero: linear-gradient(135deg, #162028 0%, #060C0F 100%); } /* Fuchsia Red Dark */ [data-theme="fuchsia-red-dark"] { --theme-primary: #C74B8E; --theme-primary-light: #E76BAE; --theme-primary-dark: #A72B6E; --theme-primary-rgb: 199, 75, 142; --theme-secondary: #8B2D5E; --theme-secondary-light: #AB4D7E; --theme-secondary-dark: #6B0D3E; --theme-accent: #FFB6C1; --theme-accent-light: #FFD6E1; --theme-accent-dark: #FF96A1; --bg-primary: #1A0A12; --bg-secondary: #2D1224; --bg-tertiary: #3D1A32; --bg-dark: #0D0509; --bg-darker: #060204; --bg-glass: rgba(61, 26, 50, 0.9); --bg-glass-dark: rgba(26, 10, 18, 0.95); --text-primary: #F9E8F0; --text-secondary: #D8B8C8; --text-muted: #9A7888; --text-light: #FFFFFF; --border-light: rgba(199, 75, 142, 0.2); --border-medium: rgba(199, 75, 142, 0.3); --border-dark: rgba(199, 75, 142, 0.4); --shadow-glow: 0 0 30px rgba(199, 75, 142, 0.3); --gradient-hero: linear-gradient(135deg, #2D1224 0%, #060204 100%); } /* Tangelo Dark */ [data-theme="tangelo-dark"] { --theme-primary: #FF8C00; --theme-primary-light: #FFAC40; --theme-primary-dark: #CC6C00; --theme-primary-rgb: 255, 140, 0; --theme-secondary: #CC5500; --theme-secondary-light: #EC7520; --theme-secondary-dark: #AC3500; --theme-accent: #FFD700; --theme-accent-light: #FFE740; --theme-accent-dark: #CCB700; --bg-primary: #1A0D05; --bg-secondary: #2D1A0D; --bg-tertiary: #3D2515; --bg-dark: #0D0602; --bg-darker: #060301; --bg-glass: rgba(61, 37, 21, 0.9); --bg-glass-dark: rgba(26, 13, 5, 0.95); --text-primary: #FFF0E6; --text-secondary: #E8C8B0; --text-muted: #A88868; --text-light: #FFFFFF; --border-light: rgba(255, 140, 0, 0.2); --border-medium: rgba(255, 140, 0, 0.3); --border-dark: rgba(255, 140, 0, 0.4); --shadow-glow: 0 0 30px rgba(255, 140, 0, 0.3); --gradient-hero: linear-gradient(135deg, #2D1A0D 0%, #060301 100%); } /* Vivid Green Dark */ [data-theme="vivid-green-dark"] { --theme-primary: #00A878; --theme-primary-light: #33C49A; --theme-primary-dark: #008060; --theme-primary-rgb: 0, 168, 120; --theme-secondary: #1A5D4A; --theme-secondary-light: #2A7D6A; --theme-secondary-dark: #0A3D2A; --theme-accent: #FF6B6B; --theme-accent-light: #FF9B9B; --theme-accent-dark: #E54B4B; --bg-primary: #051A12; --bg-secondary: #0A2D1E; --bg-tertiary: #0F3D2A; --bg-dark: #020D08; --bg-darker: #010604; --bg-glass: rgba(15, 61, 42, 0.9); --bg-glass-dark: rgba(5, 26, 18, 0.95); --text-primary: #E8F5F0; --text-secondary: #A8D8C8; --text-muted: #68A898; --text-light: #FFFFFF; --border-light: rgba(0, 168, 120, 0.2); --border-medium: rgba(0, 168, 120, 0.3); --border-dark: rgba(0, 168, 120, 0.4); --shadow-glow: 0 0 30px rgba(0, 168, 120, 0.3); --gradient-hero: linear-gradient(135deg, #0A2D1E 0%, #010604 100%); } /* Bitter Chocolate Dark */ [data-theme="bitter-chocolate-dark"] { --theme-primary: #8D6E63; --theme-primary-light: #AD8E83; --theme-primary-dark: #6D4E43; --theme-primary-rgb: 141, 110, 99; --theme-secondary: #5D4037; --theme-secondary-light: #7D6057; --theme-secondary-dark: #3D2017; --theme-accent: #D4AF37; --theme-accent-light: #E8C867; --theme-accent-dark: #B8962D; --bg-primary: #0D0806; --bg-secondary: #1A100E; --bg-tertiary: #2E1C18; --bg-dark: #060403; --bg-darker: #030201; --bg-glass: rgba(46, 28, 24, 0.9); --bg-glass-dark: rgba(13, 8, 6, 0.95); --text-primary: #F0EBE6; --text-secondary: #D8C8B8; --text-muted: #9A8878; --text-light: #FFFFFF; --border-light: rgba(141, 110, 99, 0.2); --border-medium: rgba(141, 110, 99, 0.3); --border-dark: rgba(141, 110, 99, 0.4); --shadow-glow: 0 0 30px rgba(212, 175, 55, 0.25); --gradient-hero: linear-gradient(135deg, #1A100E 0%, #030201 100%); } /* Asphalt Dark */ [data-theme="asphalt-dark"] { --theme-primary: #4A5568; --theme-primary-light: #6A7588; --theme-primary-dark: #2A3548; --theme-primary-rgb: 74, 85, 104; --theme-secondary: #2D3748; --theme-secondary-light: #4D5768; --theme-secondary-dark: #1D2738; --theme-accent: #48BB78; --theme-accent-light: #68DB98; --theme-accent-dark: #289B58; --bg-primary: #0D1117; --bg-secondary: #161B22; --bg-tertiary: #21262D; --bg-dark: #010409; --bg-darker: #000000; --bg-glass: rgba(33, 38, 45, 0.95); --bg-glass-dark: rgba(13, 17, 23, 0.95); --text-primary: #F0F6FC; --text-secondary: #8B949E; --text-muted: #6E7681; --text-light: #FFFFFF; --border-light: rgba(74, 85, 104, 0.2); --border-medium: rgba(74, 85, 104, 0.3); --border-dark: rgba(74, 85, 104, 0.4); --shadow-glow: 0 0 30px rgba(72, 187, 120, 0.2); --gradient-hero: linear-gradient(135deg, #161B22 0%, #000000 100%); } /* Lavender Dark */ [data-theme="lavender-dark"] { --theme-primary: #9F7AEA; --theme-primary-light: #B794F4; --theme-primary-dark: #805AD5; --theme-primary-rgb: 159, 122, 234; --theme-secondary: #6B46C1; --theme-secondary-light: #805AD5; --theme-secondary-dark: #553C9A; --theme-accent: #F687B3; --theme-accent-light: #FBB6CE; --theme-accent-dark: #ED64A6; --bg-primary: #1A1025; --bg-secondary: #251535; --bg-tertiary: #322045; --bg-dark: #0D0812; --bg-darker: #060408; --bg-glass: rgba(50, 32, 69, 0.9); --bg-glass-dark: rgba(26, 16, 37, 0.95); --text-primary: #F3E8FF; --text-secondary: #C8B8E8; --text-muted: #9888B8; --text-light: #FFFFFF; --border-light: rgba(159, 122, 234, 0.2); --border-medium: rgba(159, 122, 234, 0.3); --border-dark: rgba(159, 122, 234, 0.4); --shadow-glow: 0 0 30px rgba(159, 122, 234, 0.3); --gradient-hero: linear-gradient(135deg, #251535 0%, #060408 100%); } /* ═══════════════════════════════════════════════════════════════════════════ UTILITY CLASSES - ใช้ร่วมกับ theme ═══════════════════════════════════════════════════════════════════════════ */ /* Background utilities */ .bg-primary { background-color: var(--bg-primary) !important; } .bg-secondary { background-color: var(--bg-secondary) !important; } .bg-tertiary { background-color: var(--bg-tertiary) !important; } .bg-dark { background-color: var(--bg-dark) !important; } .bg-theme { background-color: var(--theme-primary) !important; } .bg-theme-light { background-color: var(--theme-primary-light) !important; } .bg-theme-dark { background-color: var(--theme-primary-dark) !important; } .bg-gradient { background: var(--gradient-primary) !important; } .bg-glass { background: var(--bg-glass) !important; backdrop-filter: blur(12px); } /* Text utilities */ .text-primary { color: var(--text-primary) !important; } .text-secondary { color: var(--text-secondary) !important; } .text-muted { color: var(--text-muted) !important; } .text-light { color: var(--text-light) !important; } .text-theme { color: var(--theme-primary) !important; } .text-accent { color: var(--theme-accent) !important; } /* Border utilities */ .border-theme { border-color: var(--theme-primary) !important; } .border-light { border-color: var(--border-light) !important; } .border-medium { border-color: var(--border-medium) !important; } /* Shadow utilities */ .shadow-sm { box-shadow: var(--shadow-sm) !important; } .shadow-md { box-shadow: var(--shadow-md) !important; } .shadow-lg { box-shadow: var(--shadow-lg) !important; } .shadow-glow { box-shadow: var(--shadow-glow) !important; } /* Status colors */ .text-success { color: var(--color-success) !important; } .text-warning { color: var(--color-warning) !important; } .text-error { color: var(--color-error) !important; } .bg-success { background-color: var(--color-success) !important; } .bg-warning { background-color: var(--color-warning) !important; } .bg-error { background-color: var(--color-error) !important; }