:root { --primary: #FF0000; --primary-always: #FF0000; --secondary: #FF7300; --accent: #FFD36B; --primary-hover: #CC0000; --background: #FFF8F3; --white: #ffffff; --white-hover: #f5f5f5; --background-l2: #FFF8F3; --text: #2B2B2B; --text-secondary: #6B6B6B; --text-always-white: #ffffff; --glass-bg: rgba(255, 255, 255, 0.6); --glass-border: rgba(255, 255, 255, 0.3); --border: #e4e4e4; --border-hover: #d1d1d1; --black: #111111; --red: #FF0000; --green: #00FF00; --blue: #0000FF; --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c; --red-800: #991b1b; --red-900: #7f1d1d; --red-950: #450a0a; --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac; --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d; --green-800: #166534; --green-900: #14532d; --green-950: #052e16; } /* Dark theme : activated when */ html.dark { --primary: var(--red-400); --primary-hover: var(--red-500); --background: #020617; --white: #060c27; --white-hover: #071036; --text: #E5E7EB; --text-secondary: #6B6B6B; --glass-bg: rgba(15, 23, 42, 0.8); --glass-border: rgba(148, 163, 184, 0.3); --border: #070e30; --border-hover: rgb(5, 11, 49); --black: #050b27; --red: #FF0000; --green: #00FF00; --blue: #0000FF; --red-50: #2e0a0a; --red-100: #581111; --red-200: #7f1616; --red-300: #a81e1e; --red-400: #dc2626; --red-500: #ef4444; --red-600: #f87171; --red-700: #fb9e9e; --red-800: #fdc1c1; --red-900: #fee2e2; --red-950: #fef2f2; --green-50: #022c14; --green-100: #064e2a; --green-200: #0a6b3d; --green-300: #0e8a50; --green-400: #16a34a; --green-500: #22c55e; --green-600: #4ade80; --green-700: #86efac; --green-800: #bbf7d0; --green-900: #dcfce7; --green-950: #f0fdf4; } .glass { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; } html.dark .glass { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 1.5rem; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s; } .glass:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); } .glass-noshadow { background: var(--glass-bg); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: 1.5rem; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .glass-noshadow:hover { transform: translateY(-8px); } .btn { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: perspective(1px) translateZ(0); } .btn:hover { transform: perspective(1px) translateZ(0) scale(1.02); } .float { animation: float 3.5s ease-in-out infinite; }