:root {
    --dark-100: #1a1b1e;
    --dark-200: #141517;
    --dark-300: #0c0d0e;
    --accent-400: #a1a1aa; /* zinc-400 */
    --accent-500: #71717a; /* zinc-500 */
    --accent-600: #52525b; /* zinc-600 */
    --accent-700: #3f3f46; /* zinc-700 */
    --gray-100: #f3f4f6;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --red-500: #ef4444;
}

.bg-dark-100 { background-color: var(--dark-100); }
.bg-dark-200 { background-color: var(--dark-200); }
.bg-dark-300 { background-color: var(--dark-300); }
.bg-accent-600 { background-color: var(--accent-600); }
.bg-gray-600 { background-color: var(--gray-600); }

.text-gray-100 { color: var(--gray-100); }
.text-gray-400 { color: var(--gray-400); }
.text-accent-400 { color: var(--accent-400); }
.text-red-500 { color: var(--red-500); }
.text-verified { color: #3b82f6; } /* blue-500 */

.border-gray-700 { border-color: var(--gray-700); }
.border-gray-800 { border-color: var(--gray-800); }
.focus\:ring-accent-500:focus { --tw-ring-color: var(--accent-500); }

.hover\:bg-accent-700:hover { background-color: var(--accent-700); }
.hover\:bg-gray-700:hover { background-color: var(--gray-700); }
.hover\:text-gray-300:hover { color: var(--gray-300); }
.hover\:text-red-500:hover { color: var(--red-500); }

        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus,
        input:-webkit-autofill:active {
            transition: background-color 5000s ease-in-out 0s;
            -webkit-text-fill-color: #fff !important;
        }